Angular2 QueryList基于元素类

Question

有没有办法检索ViewChildren或ContentChildren按元素类？

这可以通过id或组件工作,但不适用于基于类的查询,即classedViewItems和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
}

对于以下内容:

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

我需要通过元素类获取查询列表而不进行装饰.

Answer 1

@ViewChild(),@ViewChildren(),@ContentChild(),@ContentChildren()仅支持,因为它是角文档中也提到的模板变量的名称(或逗号分隔的名称列表)或类型的部件或指令作为选择的.

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

另请参见如何在组件模板中选择元素？

Answer 2

这是一个老问题，但由于Netanet Basal 的这个关于轮播的链接，我们解决了这个问题。

如果我们编写一个简单的指令，它具有一个类名作为选择器 - 在例如类“myClass”中， - 您可以添加与您的组件相同的.ts，但不要忘记在模块中声明 -

@Directive({
  selector: '.myClass'
})
export class MyClassElement {
}

让可能有一些喜欢

@ViewChildren(MyClassElement , { read: ElementRef }) 
              private itemsElements : QueryList<ElementRef>;

在 .html 中

<div class="myClass">one</div>
<div class="myClass">two</div>
<div class="myClass">three</div>