我成功地使用<ng-content></ng-content>
来显示孙子中的组件,如下所示:Father-to-son component tree with guest component,但现在我想在该孙子中使用@ContentChild
来访问传入的内容,但我似乎无法正常工作。
以下是我在stackBlitz中使用选择器和@ContentChild
的尝试:
https://stackblitz.com/edit/angular-dpu4pm。无论我做什么,@ContentChild
总是在TheChild组件中未定义,但在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
}
}
有关如何进行此项工作的任何建议,或任何其他方式从孙子访问祖父母将非常感激。