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以仅获取具有特定类的元素，但这并不能让您免于向每个元素添加模板变量。

另见How can I select an element in a component template?

Answer 2

这是一个古老的问题，但是感谢这个link about carousel by Netanet Basal可以解决这个问题。

如果我们编写一个简单的指令，则该指令在类中具有className作为选择器。类“ 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>

Angular2 QueryList基于元素类

2 个答案: