角度材料選項卡 - 僅在選擇活動選項卡時加載/卸載組件

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>

調用此視圖時，有兩個組件同時加載並運行。 即調用 ManagersComponent（非活動選項卡）的 ngOnInit。

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() {

    }
}

有沒有辦法加載和銷毀組件，以便僅加載活動選項卡，而非活動選項卡在單擊之前不會加載，並在離開時銷毀？

即在上面的代碼片段中，在選擇活動選項卡之前，不會為 ManagersComponent 加載 ngOnInit，當離開時，將調用 ngOnDestroy

Answer 1

您可以將<ng-template>與<mat-tab>的matTabContent屬性一起使用

<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屬性可以用作標志，這可能是理想的方式。

Answer 3

用

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

由於 Angular Material 的文檔很差，很難找到。 但是 ng-template 為選項卡啟用了延遲加載。 <ng-template matTabContent></ng-template>