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

Question

场景:

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

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

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

Answer 1

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

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

因此，我们可以从 Tab 中删除内容并在 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 上创建了相同的示例.