Question

我想知道如何检查Element是否实现了一些指令我有两个指令，一个Sortable和一个SortableItem，一旦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中提供一些提示。

检查HtmlElement是否有指令

1 个答案: