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

Question

设想 ：

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

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

问题：
我只想将内容更改为display:none;而不是从 DOM 中删除它，而不是默认行为。

Answer 1

我不认为我们可以改变 Tabs 的默认行为，截至目前。

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

因此，我们可以从 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上创建了相同的示例。