给出 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>
有两个组件both调用此视图时加载并运行。即调用 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>与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>
查看文档 https://material.angular.io/components/tabs/overview#lazy-loading
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
