检查 HtmlElement 是否有指令

Question

我想知道如何检查元素是否实现了某些指令。
我有两个指令，一个 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 中执行此操作。

检查 HtmlElement 是否有指令

check if an HtmlElement has a directive

dart

angular-dart