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關於旋轉木馬的這個鏈接是一個關於這個問題的工作。

如果我們編寫一個簡單的指令，它具有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>