Вкладки угловых материалов - Загружать / выгружать компоненты, только если выбрана активная вкладка

Question

Учитывая следующий код MainComponent.html:

<mat-tab-group #tabGroup (selectedTabChange)="onTabClick($event)">
  <mat-tab label="Users">
    <!-- Active Tab. This tab is shown first -->
    <app-users></app-users>
  </mat-tab>
  <mat-tab label="Managers">
    <app-managers></app-managers>
  </mat-tab>
</mat-tab-group>

Есть два компонента, которые оба загружаются и запускаются при вызове этого представления. то есть вызывается ngOnInit для ManagersComponent (неактивная вкладка).

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
    selector: 'app-managers',
    templateUrl: './managers.component.html',
    styleUrls: ['./managers.component.scss']
})
export class ManagersComponent implements OnInit, OnDestroy {

    constructor() { }

    ngOnInit() {
      //This is called when the MainComponent is loaded. 
    }

    ngOnDestroy() {

    }
}

Есть ли способ загрузки и уничтожения компонентов, чтобы загружалась только активная вкладка, а неактивные вкладки не загружались до тех пор, пока не были нажаты и не уничтожены при оставлении?

т.е.. в приведенном выше фрагменте кода ngOnInit не будет загружен для ManagersComponent до тех пор, пока не будет выбрана активная вкладка, а после выхода ngOnDestroy будет вызываться

Answer 1

вы можете использовать <ng-template> с атрибутом matTabContent в <mat-tab>

<mat-tab-group #tabGroup (selectedTabChange)="onTabClick($event)">
  <mat-tab label="Users">
    <ng-template matTabContent>
      <app-users></app-users>
    </ng-template>
  </mat-tab>
  <mat-tab label="Managers">
    <ng-template matTabContent>
      <app-managers></app-managers>
    </ng-template>
  </mat-tab>
</mat-tab-group>

см. Документацию

Answer 2

Вы можете использовать директиву *ngIf, чтобы компоненты загружались только с активной вкладкой, а затем удалялись, когда она становилась неактивной.Примером может быть что-то вроде:

<mat-tab-group #tabGroup (selectedTabChange)="onTabClick($event)">
  <mat-tab label="Users">
    <!-- Active Tab. This tab is shown first -->
    <app-users *ngIf="!managerActive"></app-users>
  </mat-tab>
  <mat-tab label="Managers">
    <app-managers *ngIf="managerActive"></app-managers>
  </mat-tab>
</mat-tab-group>

Из документации Angular Material mat-tab похоже, что есть свойство isActive, которое вы можете использовать в качестве флага, который, вероятно, будетидеальный способ.