使用@ViewChild获取ng-content组件?

Question

我已经创建了一个使用ng-content插槽的模板的卡:

<ng-content select="card-header"></ng-content>
<ng-content select="card-body"></ng-content>
<ng-content></ng-content>
<ng-content select="card-footer"></ng-content>

在CardComponent中，我试图使用@ViewChild获取CardHeaderComponent参考，如下所示:

@ViewChild(CardHeaderComponent)
header: CardHeaderComponent;

I看起来不像成功，但是，根据ngAfterViewInit中的日志语句:

console.log(this.header);

这是Stackblitz的演示。

想法吗?

Answer 1

用@ContentChildren代替@ViewChild:

@ContentChildren(CardHeaderComponent) header: QueryList<ElementRef>;