angular2 获取非子组件的 elementRef答案

【问题标题】：angular2 get elementRef of component that is not a childangular2 获取非子组件的 elementRef
【发布时间】：2018-12-21 01:36:09
【问题描述】：

在我的应用中，我有以下结构：

<fin-header></fin-header>
<main></main>
<fin-footer></fin-footer>

在标题中，我想将滚动添加到main 的特定组件。我的滚动方法以elementRef 作为参数。但我无法通过@ViewChild 得到一个，因为main 的组件不是标题的子级。

有没有机会获得非子组件的elementRef？

【问题讨论】：

我认为您可以使用父元素将 main 的 elementRef 传递给标题。您可以在 main 中添加一个 elementRef 的输出属性，并在相同类型的 header 中添加一个输入属性，然后在父级中，将一个设置为 AfterViewInit 中的另一个吗？

【解决方案1】：

也许您可以稍微修改一下您的结构并将您的组件嵌入到父组件中。比如：

<parent>
  <fin-header [elementRef]="mainRef"></fin-header>
  <main></main>
  <fin-footer></fin-footer>
<parent>

这样，父级可以将其子级（主）的引用传递给其另一个子级（标头）。

【讨论】：

【解决方案2】：

您可以获取main elementRef 并使用nativeElement.parentElement 获取父级并从父级对DOM 执行另一个查询。例如，如果结构类似于：

<div>
  <fin-header></fin-header>
  <main></main>
  <fin-footer></fin-footer>
</div>

获取main 的elementRef nativeElement.parentElement 将是div。当然，div.querySelectorAll 将拥有所有 div 的孩子。

【讨论】：