dart - 检查 HtmlElement 是否有指令

Question

我想知道如何检查元素是否实现了某些指令。
我有两个指令，一个 Sortable 和一个 SortableItem，一旦 SortableItem 中的 onDrop 触发，我将在 Sortable 父级上调用一些绑定(bind)函数。
问题是 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 中执行此操作。