Во-первых, рассмотрите возможность обновления ваших угловых зависимостей до 6.x.x
, где Angular Material поддерживает отложенную загрузку содержимого вкладок.
Из документов для вкладок :
По умолчанию содержимое вкладки загружается с нетерпением.Загруженные вкладки будут инициализировать дочерние компоненты, но не будут внедрять их в DOM, пока вкладка не будет активирована.
Если вкладка содержит несколько сложных дочерних компонентов или содержимое вкладки полагается на вычисления DOM во время инициализации, рекомендуетсяленивая загрузка содержимого вкладки.
В любом случае вы можете использовать атрибут matTabContent
с помощью ng-template
, где его содержимое будет загружаться лениво.
<mat-tab-group>
<mat-tab label="Tab 1">
<ng-template matTabContent>
<p>Content goes here</p>
</ng-template>
</mat-tab>
<mat-tab label="Tab 2">
<ng-template matTabContent>
<p>Content goes here</p>
</ng-template>
</mat-tab>
</mat-tab-group>
Обновлен Stackblitz