角度材质选项卡-仅在选中激活选项卡时加载/卸载零部件 [英] Angular Material Tabs - Load/Unload components only when active tab is selected

问题描述

给定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

推荐答案

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

see documentation

这篇关于角度材质选项卡-仅在选中激活选项卡时加载/卸载零部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！