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

问题描述

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

请检查标签二它没有正确展开.

Please check tab two it is not expanded properly.

如何修复它.

推荐答案

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

Firstly, consider updating your Angular dependencies to 6.x.x, where Angular Material has support for lazy-loading of tab content.

来自标签的文档:

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

如果标签页包含多个复杂的子组件或者标签页的内容在初始化时依赖于DOM计算，建议延迟加载标签页的内容.

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.

无论如何，您可以通过 ng-template 来利用 matTabContent 属性，它的内容将被延迟加载.

Anyways, you can leverage on the matTabContent attribute with ng-template, where its contents will be lazily loaded.

<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

这篇关于垫子扩展面板在垫子选项卡中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！