Angular 2-使用@ContentChildren过滤组件的内容 [英] Angular 2 - Using @ContentChildren for filtering a component's content

问题描述

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

I'm trying to implement a search component being able to trigger a search(term: string) function on specific children. This search function will return null if the search on the child failed or a reference to the child if succeeded.

之所以这样，是因为我想收集"对列表中成功的角度分量的所有引用，以便可以将它们设置为新的" ContentChildren，因此实际上要进行基本过滤..

This is so because I want to "collect" all references to the angular components that succeeded in a list, so that I could set them somehow as 'new' ContentChildren, so actually do basic filtering..

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

This is what I have so far:

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组件也都有一个通用的基类，但这也不起作用.

1. The first is that @ContentChildren() won't accept the (yes, imported) interface Isearchable, since '[ts] Cannot find name Isearchable'. Alternatively all Isearchable components also have a common baseclass, but this also do not work.

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

Currently executing the program gives me the following error: "Uncaught (in promise): Unexpected directive value 'undefined' on the View of component 'SearchComponent'"

2.第二个问题是，即使我在输入中键入内容，也不会以某种方式触发ngOnChanges.这必须很简单，我会错过吗?

2. The second problem is that somehow the ngOnChanges won't be fired even if I type into the input. This must be simple, do I miss something?

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

3. Finally, the third problem is that I do not know exactly how to make the search results (that can be of different component types) being displayed in the DOM. My hope is actually that I can somehow two-way bind to the @ContentChildren searchcontent. This would probably solve the problem, wouldn't it?

我真的不知道如何继续，我们将不胜感激！谢谢大家！

I really don't have a clue, how to continue, any help is appreciated! Thank you all!

欢呼

推荐答案

您不能在此级别上使用接口，因为它们仅在设计时适用，而在运行时不适用.

You can't use interfaces at this level since they only apply at design time not at runtime.

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

There is also an error in your code:

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

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

To get the list of specified components as input, you need to define a base class for your component and use this class in @ContentChildren. An additional step is required to make this work. You need to register the component itself into its providers against the parent class (with useExisting). This explanation could appear a bit "abstract" but this question could help you and will give you a concrete sample:

• Angular2和类继承支持.

这篇关于Angular 2-使用@ContentChildren过滤组件的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！