Estoy usando con éxito <ng-content></ng-content> para mostrar un componente en un nieto como se responde aquí: árbol de componentes de padre a hijo con componente invitado , pero ahora me gustaría usar @ContentChild en ese nieto para acceder al contenido pasado, pero parece que no puedo hacer que nada funcione.

Aquí está mi intento de usar un selector y @ContentChild en un stackBlitz: https://stackblitz.com/edit/angular-dpu4pm . No importa lo que haga, @ContentChild siempre está indefinido en el componente TheChild, pero funciona en el componente TheParent.

 @Component({ selector: 'spinner', template: ` spinner `, }) @Component({ selector: 'my-app', template: ` works <the-parent><spinner #spin></spinner></the-parent> `, }) @Component({ selector: 'the-parent', template: 'this is parent <the-child><ng-content #content></ng-content></the-child>' }) export class TheParent implements AfterViewInit{ @ContentChild('spin') spin; ngAfterViewInit() { alert('parents spin is '+typeof this.spin); //object } } @Component({ selector: 'the-child', template: 'this is child <ng-content></ng-content>' }) export class TheChild implements AfterViewInit{ @ContentChild('spin') spin; @ContentChild('content') content; ngAfterViewInit() { alert('childs spin is '+typeof this.spin); //undefined alert('childs content is '+typeof this.content); //undefined } }

Cualquier consejo sobre cómo hacer que esto funcione, o cualquier otro enfoque para acceder al abuelo del nieto sería muy apreciado.