HtmlElementにディレクティブがあるかどうか確認してください

Question

Elementがディレクティブを実装しているかどうかを確認する方法を知りたいと思います。
SortableとSortableItemの2つのディレクティブがあり、SortableItem内のonDropが呼び出されると、Sortableの親にバインドされた関数が呼び出されます。
問題は、DropイベントのターゲットがSortableItem要素内のいくつかの要素であるため、dropzoneとして使用されている元のSortableItemを見つける必要があることです。
私はevent.targetの親をループし、Elementが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でこれを行う方法のヒントを提供するかもしれません。