嵌套的 Angular 材质选项卡答案

【问题标题】：Nested Angular material tabs嵌套的 Angular 材质选项卡
【发布时间】：2019-04-11 04:52:57
【问题描述】：

我需要将动态标签添加到某些User Preferences 屏幕。主要首选项选项卡可以是具有静态内容的静态选项卡，但第二个选项卡应具有嵌套的 mat-tab 元素。

这些额外的动态首选项来自后端，然后我可以使用*ngFor 来呈现额外的选项卡。

我现在看到的问题是标签labels。标签文本的值来自第一个嵌套选项卡，而不是来自我正在设置的 label 属性。

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

来自在线项目的代码sn-p是：

<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>

如果您单击“更多动态首选项”选项卡，则选项卡标题文本变为“第一个”。在第二个选项卡上也发生了同样的情况，我正在同步加载其选项卡内容，而不是异步示例。

【问题讨论】：

标签： angular angular-material mat-tab

【解决方案1】：

我不确定<ng-template>s 在<mat-tabs> 元素中的用途是什么，但是在删除这些元素后，将一些绑定添加到选项卡组件的label 输入，并将异步调用重构为不使用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>

Updated stackblitz

【讨论】：

mat-tabs里面的ng-template用来懒加载tab容器的内容

【解决方案2】：

这个问题是由为标签设置标签的方式引起的。

您正在使用属性标签设置父标签，但是对于子标签，您使用了模板方式来定义它。

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

所以你可以做的是要么定义父标签的标签相同，要么也为子标签添加标签属性。

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

【讨论】：

我在嵌套选项卡上使用 ng-template 时遇到问题。它不是渲染。我会检查你的代码。谢谢。
我根据他们的在线示例使用<ng-template mat-tab-label>{{tab.label}}</ng-template>，但仅使用label 道具似乎可以完成这项工作。