垫子选项卡中的垫子扩展面板无法正常工作

Question

https://stackblitz.com/edit/angular-material2-issue-1vt6en?file=app/app.component.html

请检查选项卡二,它没有正确展开.

如何解决它.

Answer 1

首先,考虑更新Angular依赖项6.x.x,其中Angular Material支持延迟加载选项卡内容.

从标签的文档:

默认情况下,急切地加载选项卡内容.急切加载的选项卡将初始化子组件,但在激活选项卡之前不会将它们注入DOM.

如果选项卡包含多个复杂的子组件,或者选项卡的内容在初始化期间依赖于DOM计算,则建议延迟加载选项卡的内容.

无论如何,你可以利用matTabContent属性ng-template,其内容将被延迟加载.

<mat-tab-group>
  <mat-tab label="Tab 1">
    <ng-template matTabContent>
      <p>Content goes here</p>
    </ng-template>
  </mat-tab>
  <mat-tab label="Tab 2">
    <ng-template matTabContent>
      <p>Content goes here</p>
    </ng-template>
  </mat-tab>
</mat-tab-group>

更新了Stackblitz