angular - 如何在嵌套中使用 ContentChild/Children

Question

我成功地<ng-content></ng-content>用来在孙子中显示一个组件，如下所示：Father-to-son component tree with guest component，但现在我想@ContentChild在那个孙子中使用来访问传入的内容，但我似乎不能让任何工作。

这是我@ContentChild在 stackBlitz 中使用选择器的尝试： 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
  }

}

任何有关如何使这项工作的建议，或任何其他从孙子访问祖父母的方法都将不胜感激。