将额外的mat-tab转换为mat-tab-group不起作用

Question

我有一个用于编辑个人信息的组件CreateEditPersonComponent。个人信息在物料设计页签中的组织方式如下：

<mat-tab-group>
      <mat-tab label="Personal Info">
        --- Personal info ---
      </mat-tab>
      <mat-tab label="Address">
        --- Address info ---
      </mat-tab>
      <ng-content></ng-content>  <- ADDITIONAL TABS WOULD BE ADDED HERE.
</mat-tab-group>

我还有另一个组件CreateEditPatientComponent，它接受CreateEditPersonComponent，并假设添加一个包含患者相关信息(医疗记录，...)的选项卡。

<create-edit-person> <-- CREATE / EDIT PERSON COMPONENT. 
  <mat-tab label="Medical Records"> <-- IT SUPPOSES TO APPEND A NEW TAB TO THE MAT TAB GROUP.
    <div>
      --- Medical Records ---
    </div>
  </mat-tab>
</create-edit-person>

关键是，只要地址信息但患者相关选项卡未呈现，此代码就可以无错误地运行并显示个人信息表单。我做错了什么？

Answer 1

mat-tab-group获取mat-tab的方式是通过@ContentChildren(MatTab)，只查找MatTab。mat-tab-group中的ng-content不是MatTab，因此会被忽略。

我们可以在你的CreateEditPersonComponent中破解它：

{
  @ViewChild(MatTabGroup) matTabGroup: MatTabGroup;
  @ViewChildren(MatTab) inclusiveTabs: QueryList<MatTab>;
  @ContentChildren(MatTab, {descendants: true}) tabsFromNgContent: QueryList<MatTab>;

  ngAfterViewInit(){
    this.matTabGroup._tabs.reset([...this.inclusiveTabs.toArray(), ...this.tabsFromNgContent.toArray()]);
    this.matTabGroup._tabs.notifyOnChanges();
  }
}