Перевести дополнительную вкладку mat в группу mat-tab не работает - PullRequest
Новая
       20

Перевести дополнительную вкладку mat в группу mat-tab не работает

0 голосов
/ 28 апреля 2018

У меня есть компонент 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>

Суть в том, что этот код работает без ошибок и отображает форму Личная информация, если информация об адресе, но вкладка, связанная с пациентом, не отображается. Что я делаю не так?

1 Ответ

0 голосов
/ 18 октября 2018

Способ, которым mat-tab-group получает свои вкладки mat, - через @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();
  }
}
...