问题描述
我正在尝试实现一个搜索组件，该组件能够在特定子项上触发 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:
这篇关于Angular 2-使用@ContentChildren过滤组件的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！