角度材料选项卡 - 仅在选择活动选项卡时加载/卸载组件

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>在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属性可以用作标志，这可能是理想的方式。