如何使用ContentChild在Angular中获取动态插入的组件的引用？

Question

我的组件（DetailsComponent）中有一个mat-tab，每个选项卡都承载自己的组件，但是它们会在运行时动态插入，这意味着它们不在Details组件的模板中。

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs">
    // Dynamically inserted tab components
    <ng-template #dynamic></ng-template>
  </mat-tab>
</mat-tab-group>

当我的“详细信息”页面加载时，它将默认为第一个选项卡，这不是我需要的选项卡，我要查找的（TargetsComponent）不在DOM中。

我有以下代码来检索TargetsComponent：

@ContentChild(TargetsComponent) private targets!: TargetsComponent;

public ngAfterContentInit(): void {
  console.log(this.targets);
}

可以理解，这在页面加载时是不确定的，但是，与文档相反，我的问题是，当DOM更改时（我转到“目标”选项卡），该变量没有被重新分配：

  

您可以使用ContentChild获取第一个元素或指令   匹配内容DOM中的选择器。 如果内容DOM   更改，并且有一个新的子项与选择器匹配，则该属性将为   已更新。

当选项卡更改为无用时，我尝试了手动更改检测this.changeDetector.detectChanges();。反正有强迫Angular重新检查ContentChildren吗？还是有更好的方法来获取此动态插入的组件的引用？