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。 ng-content中的mat-tab-group不是MatTab，因此将被忽略。

我们可以在您的“ CreateEditPersonComponent”中对其进行黑客入侵：

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

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

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

1 个答案: