檢查一個HtmlElement是否有指令

Question

我想知道如何檢查一個Element是否實現了某個指令。
我有兩個指令，一個Sortable和一個SortableItem，一旦SortableItem中的onDrop觸發，我將在Sortable父級上調用一些綁定函數。
問題是Drop事件的目標是SortableItem元素中的某個元素，因此我需要找到原來用作dropzone的SortableItem。
我這樣做是通過循環通過event.target的父項，並檢查元素是否具有SortableItem的屬性選擇器，但是，我覺得這是沒有正確的方法來做到這一點。

Answer 1

如果你知道這些指令的類型，你可以使用@ViewChild()，@ViewChildren()，@ContentChild()，或@contentChildren()查詢與該指令

@ViewChildren(Sortable) QueryList<Sortable> sortables; 
@ViewChildren(SortableItem) QueryList<SortableItem> sortableItems; 

當指令包含的元素

class Sortable { 
    final ElementRef elementRef; 
    Sortable(this.elementRef); 

可以搜索QueryList以查找匹配元素。

someEvent(Element sortable) { 
    var found = sortables.toArray().firstWhere((s) => s.elementRef == sortable, orElse:() => null); 
    print(found); 
} 

https://github.com/dart-lang/angular2_components包含可排序列表。它可能會提供一些提示如何在Angular2中做到這一點。