Angular 2 - 使用 @ContentChildren 过滤组件的内容

Question

我正在尝试实现一个搜索组件，能够在特定子项上触发 search(term: string) 函数。如果对子项的搜索失败，此搜索函数将返回 null；如果成功，则返回对子项的引用。

之所以如此，是因为我想“收集”对列表中成功的 Angular 组件的所有引用，以便我可以以某种方式将它们设置为"new"ContentChildren，因此实际上进行基本过滤..

这是我到目前为止所拥有的:

search.component.html

<input (value)="searchterm" />
<ng-content>
    <!-- all components that implements iSearchable here -->
</ng-content>

search.component.ts

...
export class searchComponent implements OnChanges
{
    @Output('searchterm')
    public searchterm: string;

    // 1. Problem: ContentChildren does not work with interfaces?
    @ContentChildren(Isearchable)
    searchContent: QueryList<Isearchable>

    // 2. Problem: ngOnChanges will not fire when searchterm is changed
    ngOnChanges(event)
    {
        var toBeShown = [];

        // go through and let the components filter themselves
        for(let i = 0; i < this.searchContent.length; i++)
        {
            var element: Isearchable = this.searchContent[i];
            var result = element.search();

            if(result != null)  // search suceeded
                toBeShown.push(element);                
        }

        // 3. Problem: how to get them displayed ?
    }
}

基本上我有3个问题:

<强>1。第一个是 @ContentChildren() 不会接受(是的，导入的)接口(interface) Isearchable，因为“[ts] 找不到名称 Isearchable”。或者，所有 Isearchable 组件也有一个公共(public)基类，但这也不起作用。

当前执行程序出现以下错误:“未捕获( promise 中):组件“SearchComponent”的 View 上出现意外的指令值“未定义””

<强>2。第二个问题是，即使我在输入中键入内容，ngOnChanges 也不会被触发。这一定很简单，我错过了什么吗？

<强>3。最后，第三个问题是我不知道如何让搜索结果(可以是不同的组件类型)显示在 DOM 中。我实际上希望我可以以某种方式双向绑定(bind)到@ContentChildren搜索内容。这可能会解决问题，不是吗？

我真的不知道如何继续，非常感谢任何帮助!谢谢大家!

干杯

Answer 1

您不能在此级别使用接口(interface)，因为它们仅适用于设计时而不是运行时。

您的代码中还有一个错误:

@Input('searchterm') // instead of @Output
public searchterm: string;

要获取指定组件的列表作为输入，您需要为组件定义一个基类并在 @ContentChildren 中使用此类。需要一个额外的步骤才能完成这项工作。您需要将组件本身注册到其父类的提供程序中(使用useExisting)。这个解释可能显得有点“抽象”，但这个问题可以帮助您，并为您提供一个具体的示例:

• Angular2 and class inheritance support 。