angular-material - 垫子扩展面板在垫子选项卡中无法正常工作

Question

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

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

如何修复它。

Answer 1

首先，考虑将您的 Angular 依赖项更新为 6.x.x ，其中 Angular Material 支持选项卡内容的延迟加载。

来自 tabs 的文档:

By default, the tab contents are eagerly loaded. Eagerly loaded tabs will initalize the child components but not inject them into the DOM until the tab is activated.

If the tab contains several complex child components or the tab's contents rely on DOM calculations during initialization, it is advised to lazy load the tab's content.

无论如何，您可以通过 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>

Updated Stackblitz