mat-tab 删除 tab-body DOM 但不隐藏它

Question

场景：

• 我使用的是角度材料选项卡，每个不同的选项卡都有各自的动态组件。

• 所以当我切换选项卡时，它会从 DOM 中删除内容。当我再次返回该选项卡时，它会再次加载内容。

问题：
我只想将内容更改为

display:none;

而不是默认行为，而不是将其从 DOM 中删除。

Answer 1

到目前为止，我认为我们无法更改选项卡的默认行为。

但是，我们可以做的是，稍微改变结构以实现预期的行为。

所以，我们可以将Tabs中的内容去掉，在外部单独处理

mat-tab-group

。我们将检查哪个选项卡处于活动状态，并相应地调整相应内容的

display

属性。

总的来说，代码如下所示：

<mat-tab-group>
  <mat-tab label="First" #firstTab>
  </mat-tab>
  <mat-tab label="Second" #secondTab></mat-tab>
</mat-tab-group>
<div [ngStyle]="{'display':!firstTab.isActive ? 'none' : null}">First</div>
<div [ngStyle]="{'display':!secondTab.isActive ? 'none' : null}">Second</div>

我还在 stackblitz 上创建了相同的示例。

Answer 2

2023 年 8 月更新：MatTabGroup 组件现在使用 preserveContent 指令支持此功能：

文档：https://material.angular.io/components/tabs/overview#keeping-the-tab-content-inside-the-dom-while-its-off-screen

拉取请求：https://github.com/angular/components/pull/24299

因此，要重用 @sshdharmen 的示例，如果将 preserveContent 指令添加到 mat-tab-group，则可以将内容放回 mat-tab 内：

<mat-tab-group preserveContent>
  <mat-tab label="First">
    <!-- First tab content -->
  </mat-tab>
  <mat-tab label="Second">
    <!-- Second tab content -->
  </mat-tab>
</mat-tab-group>

选项卡内容仍然是延迟加载的，但是当您切换选项卡时，它不再从 DOM 中删除。