Angular 2-使用@ContentChildren筛选组件'；内容

我正在尝试实现一个搜索组件，该组件能够在特定子级上触发

搜索（term:string）

函数。如果对子项的搜索失败，此搜索函数将返回null；如果搜索成功，则返回对子项的引用

这是因为我想“收集”列表中成功的所有对角度组件的引用，这样我就可以将它们设置为“新”ContentChildren，实际上也可以进行基本过滤

这就是我到目前为止所做的：

search.component.html

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

搜索.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 ?
    }
}

。。。
导出类searchComponent实现OnChanges
{
@输出（'searchterm'）
公共搜索词：字符串；
//1.问题：ContentChildren无法使用接口？
@ContentChildren（可搜索）
searchContent:QueryList
//2.问题：当searchterm更改时，ngOnChanges不会触发
ngOnChanges（事件）
{
var toBeShown=[]；
//检查并让组件自行过滤
for（设i=0；i

基本上我有三个问题：

1。第一个问题是@ContentChildren（）不接受（是的，导入的）接口Isearchable，因为“[ts]找不到名称Isearchable”。或者，所有Isearchable组件也有一个公共基类，但这也不起作用

当前执行该程序时出现以下错误： “未捕获（承诺中）：组件‘SearchComponent’视图上的意外指令值‘未定义’”

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

3。最后，第三个问题是我不知道如何在DOM中显示搜索结果（可以是不同的组件类型）。我的希望实际上是，我可以以某种方式双向绑定到@contentchildrensearchcontent。这可能会解决问题，不是吗

我真的没有任何线索，如何继续，任何帮助是感激的！ 谢谢大家!

---

干杯

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

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

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

要获取指定组件的列表作为输入，需要为组件定义基类，并在

@ContentChildren

中使用此类。需要另外一个步骤来完成这项工作。您需要根据父类将组件本身注册到其提供程序中（使用

useExisting

）。这个解释可能看起来有点“抽象”，但这个问题可以帮助您，并将为您提供一个具体的示例：

• ---

谢谢，我完全错过了！有没有办法导入“中间的所有html元素”？这也可能是好的，你所说的“中间的所有html元素”是什么意思？如果这有误导性的话，很抱歉。我会给出一个例子->如果我有，我想在这个列表中同时得到comp1和comp2（searchContent）。这是可能的。您需要为组件定义基类，并在

@ContentChildren

中使用此类。需要另外一个步骤来完成这项工作。您需要根据父类将组件本身注册到其提供程序中（使用

useExisting

）。这个解释可能看起来有点“抽象”，但这个问题可以帮助您，并为您提供一个具体的示例：。另请参见