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

Question

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

这是因为我想"收集"对列表中成功的角度组件的所有引用,以便我可以将它们设置为"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()不接受(是,导入的)Isearchable接口,因为'[ts]找不到名称Isearchable'.或者,所有Isearchable组件也有一个共同的基类,但这也行不通.

目前执行该程序给出了以下错误: "未捕获(在承诺中):组件"SearchComponent"视图上的意外指令值'undefined'"

2.第二个问题是,即使我输入输入,也不会以某种方式触发ngOnChanges.这一定很简单,我会错过什么吗？

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

我真的没有线索,如何继续,任何帮助表示赞赏!谢谢你们!

干杯

Answer 1

您不能在此级别使用接口,因为它们仅在设计时而不是在运行时应用.

您的代码中也存在错误:

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

要获取指定组件的列表作为输入,您需要为组件定义基类并使用此类@ContentChildren.要使这项工作需要一个额外的步骤.您需要将组件本身注册到其父类(with useExisting)的提供程序中.这个解释可能看起来有点"抽象",但这个问题可以帮助你,并会给你一个具体的样本:

• Angular2和类继承支持.