基于元素类的Angular2 QueryList [英] Angular2 QueryList based on element class

问题描述

是否可以通过元素类检索 ViewChildren 或 ContentChildren ?

这将通过ID或组件起作用，但不适用于基于类的查询，即 classedViewItems 和 classedContentItems

  @Component({选择器:我的容器"，模板'< div>< ng-content>< ng-content></div>'})出口舱MyContainer {@ViewChildren('item')viewItems:QueryList;@ContentChildren(MyItem)contentItems:QueryList;@ViewChildren('.fine-me')classedViewItems:QueryList;//<-需要此功能@ContentChildren('.find-me')classedContentItems:QueryList;//<-或这个} 

针对以下内容:

 < my-container>< my-item class ="find-me" #item * ngFor =让item; of items"></my-item></my-container> 

我需要通过元素类获取查询列表而不修饰它.

解决方案

@ViewChild()， @ViewChildren()， @ContentChild()， @ContentChildren()仅支持模板变量的名称(或用逗号分隔的名称列表)，或者将组件或指令的类型用作选择器，如在角度文档中也提到的那样./p>

无法使用其他选择器.您可以做的就是过滤 QueryList 之后仅获取具有特定类的元素，但这并不能使您免于向每个元素添加模板变量.

另请参见如何我可以在组件模板中选择一个元素吗?

Is there a way to retrieve ViewChildren or ContentChildren by element class?

This will work, either by id or component but not for the class based queries, namely classedViewItems and classedContentItems

@Component({
    selector: 'my-container',
    template '<div><ng-content><ng-content></div>'
})
export class MyContainer {
    @ViewChildren('item') viewItems: QueryList;
    @ContentChildren(MyItem) contentItems: QueryList;
    @ViewChildren('.fine-me') classedViewItems: QueryList; // <-- need this to work
    @ContentChildren('.find-me') classedContentItems: QueryList; // <-- or this
}

for the following:

<my-container>
    <my-item class="find-me" #item *ngFor="let item; of items"></my-item>
</my-container>

I need to get the query list by the element class without decorating it.

解决方案

@ViewChild(), @ViewChildren(), @ContentChild(), @ContentChildren() only support the name of a template variable (or a comma separated list of names) or the types of components or directives as selectors as it is also mentioned in angular documentation.

There is no way to use other selectors. What you can do is to filter QueryList afterwards to only get the elements with a specific class but that doesn't free you from adding a template variable to each of them.

See also How can I select an element in a component template?

这篇关于基于元素类的Angular2 QueryList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！