Typescript 如何获取主体元素引用？

如何获取Angular 2中的主体元素引用

---

在我的例子中，我想知道我的组件是否有焦点。

使用

class MyComponent {
  constructor(private elRef:ElementRef) {
    console.log(this.elRef.nativeElement);
  }
}

您还可以订阅

focus

事件

class MyComponent {
  @HostBinding() tabindex = 0;
  @HostListener('focus', ['$event'])
  onFocus(event) {
    console.log(event);
  }
}

---

这是正确的答案，但请注意，ElementRef仅在angular在浏览器线程中运行时有效-您可以直接访问DOM-因此，当您尝试在webworker中运行应用程序时会中断。。。在文档中提到了Render2——保存以在本例中使用——但它被标记为实验性的，我还没有找到关于如何使用它的好文档。也许这样可以省去我刚才遇到的麻烦：）使用

ElementRef

不是问题。问题在于使用其

nativeElement

属性。Angular团队强烈反对在发布前使用

ElementRef.nativeElement

，但在发布后态度有所软化，因为很多人对WebWorker和服务器端渲染不感兴趣。Render2的主要限制是它只允许设置元素的属性，但无法从中读取（否则它无法与SSR和WW一起使用）。感谢您指出这一点-有任何建议或链接到Render2示例吗？我的问题是我想从所选组件中“爬上”嵌套组件树，比较组件构造函数类型，并在嵌套组件上设置活动状态变量。。。我本想用与native element类似的方式来实现这一点，但我知道应用程序稍后将需要在webworker中运行所获得的性能（也是服务器端渲染）。。。我的最佳选择是在链上发出事件、检查父级并将数据存储在共享服务中吗？没有太多。您注入它，然后调用它的一个方法，并传递一个

ElementRef

该方法应应用于中列出的所有受支持的方法