垫板选项卡上的垫板扩展面板无法正常工作 [英] Mat expansion panel is not working properly in mat tab

问题描述

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

请检查第二个选项卡，它没有正确展开.

Please check tab two it is not expanded properly.

如何修复它.

推荐答案

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

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

从文档中的标签:

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

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.

如果选项卡包含多个复杂的子组件，或者选项卡的内容在初始化期间依赖于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

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