Angular2反向指令查找答案

【问题标题】：Angular2 reverse Directive lookupAngular2反向指令查找
【发布时间】：2016-12-15 22:48:25
【问题描述】：

有没有办法仅根据对 DOM 元素的引用来查找指令实例？

在 Angular1.x 中，您可以通过使用 JQLite's "Controller" function 来实现这样的行为，实际上返回了控制器（甚至基于可选的类型参数）。

更具体地说，我希望能够通过其位置来识别一个元素，使用document.elementFromPoint() 并检索它属于哪个指令instance...

亲切的问候

【问题讨论】：

标签： angular angular2-directives

【解决方案1】：

您可以使用@ViewChild()

<my-comp #someRef someDirective></my-comp>

...
export class MyComponent {
  @ViewChild('someRef', {read: SomeDirective}) someRef:SomeDirective;

  ngAfterViewInit() {
    console.log(this.someRef);
  }
}

默认情况下，@ViewChild() 为纯 HTML 标记或组件的组件实例返回 ElementRef。使用{read: SomeType}，您可以指定要从@ViewChild() 返回的内容。

你也可以用exportAs点赞

@Directive({
  selector: 'my-dir',
  ...
  exportAs: 'myDirective'
})
class MyDirective {
}

然后像这样使用它

<my-comp my-dir #someRef="myDirective">

然后在组件中使用

@ViewChild('someRef') someRef:MyDirective;

【讨论】：

您好，感谢您的意见；但是，我不完全了解如何更改模板变量的“字符串”选择器以实际使用对已检索元素的引用，例如由 document.getElementById 或 document.elementFromPoint 检索:-)
你不能。至少我们没有官方的方式。
我害怕那些话里的东西。到目前为止，我的“最佳”想法是通过在其中添加对实例的引用来“扩展”DOM 元素。感觉……不合法，但可能是唯一的可能性。另一种类似的方法是构建特定类型的 DOM 元素的哈希表，并根据它们的本机元素检索它们...