嵌套的Angular材質選項卡

Question

我需要將動態選項卡添加到某些“ User Preferences屏幕。 主首選項選項卡可以是具有靜態內容的靜態選項卡，但是第二個選項卡應具有嵌套的mat-tab元素。

這些額外的動態首選項來自后端，然后允許我使用*ngFor渲染額外的標簽。

我現在看到的問題是標簽labels 。 標簽文本從第一個嵌套選項卡中獲取其值，而不是從我設置的label屬性中獲取。

請在這里查看我在stackblitz上的示例-https://stackblitz.com/edit/mat-tabs-nested ? embed =1& file = app/tab-group-async-example.html

在線項目的代碼段為：

 <mat-tab-group> ... <mat-tab label="More Dynamic Preferences"> <!-- NESTED HERE --> <mat-tab-group> <mat-tab *ngFor="let tab of asyncTabs | async"> <ng-template mat-tab-label>{{tab.label}}</ng-template> {{tab.content}} </mat-tab> </mat-tab-group> </mat-tab> </mat-tab-group> 

如果單擊“更多動態首選項”選項卡，則選項卡標題文本將變為“第一”。 與第二個選項卡相同，與異步示例相反，我正在同步加載其選項卡內容。

Answer 1

此問題是由為標簽設置標簽的方式引起的。

您正在使用屬性標簽設置父標簽，但是對於子標簽，您已經使用模板方法對其進行了定義。

<ng-template mat-tab-label>{{tab.label}}</ng-template>

因此，您可以做的是要么將父選項卡的標簽定義為相同，要么也為子選項卡添加標簽屬性。

這是工作副本-https: //stackblitz.com/edit/mat-tabs-nested-n77qed

Answer 2

我不確定<ng-template>的用途是在<mat-tabs>元素中，但是在刪除這些元素之后，將一些綁定添加到選項卡組件的label輸入中，並將異步調用重構為not使用setTimeout()並使用本機rxjs操作，我有一個使用嵌套選項卡和動態選項卡創建的工作演示：

  <mat-tab label="Customer Preferences"> 
    <h2>HERE ARE YOUR PREFERENCES</h2>
  </mat-tab> 

  <mat-tab label="Dynamic Preferences">
    <mat-tab-group>
      <mat-tab *ngFor="let tab of prefTabs" [label]="tab.label">
        {{tab.content}}
      </mat-tab>
    </mat-tab-group>
  </mat-tab>

  <mat-tab label="More Dynamic Preferences">
    <mat-tab-group>
      <mat-tab *ngFor="let tab of asyncTabs | async" [label]="tab.label">
        {{tab.content}}
      </mat-tab>
    </mat-tab-group>
  </mat-tab>

更新了stackblitz