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

您可以使用*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 2

您可以将<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

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>

角度材质标签-仅在选择活动标签时加载/卸载组件

3 个答案: