mat-tab удаляет DOM тела вкладки, но не скрывает его

Question

Сценарий:

• Я использую угловые вкладки материала, каждая вкладка имеет свой динамический компонент.

• Поэтому, когда я переключаю вкладки, он удаляет содержимое из DOM. И когда я снова возвращаюсь на эту вкладку, она снова загружает контент.

Проблема:
Вместо поведения по умолчанию я просто хочу изменить содержимое на display:none; вместо удаления его из DOM.

Answer 1

Не думаю, что мы можем изменить стандартное поведение вкладок, как сейчас.

Но мы можем немного изменить структуру, чтобы добиться ожидаемого поведения.

Итак, мы можем удалить содержимое из вкладок и обработать его отдельно вне 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 .