通过@ViewChild访问组件的nativeElement

Question

免责声明：我刚发现我的问题与此问题相似：Angular get nested element using directive on parent 问题本身并不相同，但接受的答案解决了我的问题

我的问题：我想使用@ViewChild访问子组件的属性“.nativeElement”。这个问题已经在SO上讨论过了，但没有解决方案适用于我的用例。我将进一步提及其他问题。

这是父组件的html：

<h1>The Title</h1>

<some-child-component #wanted></some-child-component>

<some-other-component></some-other-component>

现在我尝试像这样访问＃wanted-component：

@ViewChild('wanted') myWantedChild: ElementRef;

但是我没有在这里获得ElementRef，我将获得对SomeChildComponent-Instance的引用，就像在接受的答案中指出的那样： How to access the nativeElement of a Component in Angular4?

我可以在Childcomponent本身中获取ElementRef但是在构造函数中注入它。但我需要父组件中的ElementRef。

访问简单div块的ElementRef非常简单：

<div #wanted>something</div>

在这里，您可以通过@ ViewChild-Annotation直接获取ElementRef（比较接受的答案：What's the proper way of accessing native element in angular2 (2 diff ways) docs are scarce

现在问题仍然存在：如何获得用作子组件的组件的ElementRef？我确切的用例是我想获得子组件的高度（以像素为单位）。据我所知，我需要nativeElement-Reference。

修改

我可以将我在子组件的构造函数中获得的ElementRef公开为公共属性。但这似乎有点不对......

Answer 1

您需要使用read选项：

@ViewChild('wanted', {read: ElementRef}) myWantedChild: ElementRef;