Accès nativeElement d'un composant par @ViewChild

Question

Avertissement: Je viens de découvrir que ma question est proche d'être un duplicata de celui-ci: Angular get nested element using directive on parent La question en elle-même est pas le même, mais la réponse acceptée résout mon problème

Mon problème: Je souhaite accéder à la propriété ".nativeElement" d'un composant enfant à l'aide de @ViewChild. Cette question a déjà été discutée ici sur SO, mais il n'y avait pas de solution qui a fonctionné pour mon cas d'utilisation. Je ferai référence aux autres questions plus bas.

C'est le code html du composant parent:

<h1>The Title</h1> 

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

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

Maintenant, je tente d'accéder à la # voulait composants comme ceci:

@ViewChild('wanted') myWantedChild: ElementRef; 

Mais je ne suis pas un, élément d'ici, Je vais obtenir la référence à SomeChildComponent-Instance comme est indiqué ici dans la réponse acceptée: How to access the nativeElement of a Component in Angular4?

Je peux obtenir une prise de t Il ElementRef dans le Childcomponent lui-même mais en l'injectant dans le constructeur. Mais j'ai besoin du ElementRef dans le composant parent.

Accès au, élément d'un simple div-bloc est facile:

<div #wanted>something</div> 

Ici, vous obtenez le, élément d'directement par le @ ViewChild-Annotation (comparer la réponse acceptée ici: What's the proper way of accessing native element in angular2 (2 diff ways) docs are scarce

Maintenant la question pour moi reste: Comment puis-je obtenir le ElementRef d'un composant qui est utilisé comme un composant enfant? Mon cas d'utilisation exact est que je veux obtenir la hauteur en pixels d'un composant enfant. le NativeElement-référence pour cela

EDIT:

Je pourrais juste exposer le ElementRef que je reçois dans le constructeur du composant-enfant en tant que propriété publique. Mais cela semble un peu hors ...

Answer 1

Vous devez utiliser l'option read:

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