Angular Material 选项卡 - 仅在选择事件选项卡时加载/卸载组件

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>

有两个组件是 两者 调用此 View 时加载并运行。即调用 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>

see documentation