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中使用此类。要使这项工作需要一个额外的步骤。您需要将组件本身注册到其父类的提供程序中（使用useExisting）。这个解释可能看起来有点“抽象”，但这个问题可以帮助你并给你一个具体的样本：

Angular2 and class inheritance support。

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

1 个答案: