检查一个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中做到这一点。