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

Question

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

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

如何修复它。

标签： angular-materialangular-material2

Answer 1

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

---

从标签的文档：

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

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

无论如何，您可以利用matTabContent属性 with 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