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 上创建了相同的示例。