我正在使用angular4和angular material2。
我有以下代码
<md-tab-group color="primary">
<md-tab label="Employee">
<app-employee></app-employee>
</md-tab>
<md-tab label="Department">
<app-department></app-department>
</md-tab>
<md-tab label="Attendance">
<app-attendance></app-attendance>
</md-tab>
</md-tab-group>
现在所有组件都是最初加载的,但我想在选择相应的选项卡时加载特定的组件。
NB。 Angular Material最近已更新,组件已重命名,例如<md-tab>
现在是<mat-tab>
。 DOC:https://material.angular.io/components/tabs/api
你想要的是延迟加载标签内容。根据Angular材料文档,目前似乎不可能。
以下是一些解决方法:
选项1.根据tabgroup的selectedIndex
属性激活子组件
<mat-tab-group color="primary" #tabGroup>
<mat-tab label="Employee">
<app-employee *ngIf="tabGroup.selectedIndex === 0"></app-employee>
</mat-tab>
<mat-tab label="Department" #tabDepartment>
<app-department *ngIf="tabGroup.selectedIndex === 1"></app-department>
</mat-tab>
<mat-tab label="Attendance">
<app-attendance *ngIf="tabGroup.selectedIndex === 2"></app-attendance>
</mat-tab>
</mat-tab-group>
选项2.收听选项卡组上的selectedIndexChange()
事件
并在此事件的事件处理程序中动态加载一些内容。
就像是:
<mat-tab-group (selectedIndexChange)="loadDynamicContent()">
<mat-tab>
{{ dynamicContent }}
</mat-tab>
</mat-tab-group>
我在这里找到了这个想法:https://stackoverflow.com/a/45980187
HTML文件
<mat-tab-group (selectedIndexChange)="selectTab($event)">
<mat-tab label="Tab 1">
<app-control1 *ngIf="selectedTab === 0"></app-control1>
</mat-tab>
<mat-tab label="Tab 2">
<app-control2 *ngIf="selectedTab === 1"></app-control2>
</mat-tab>
</mat-tab-group>
TS档案
申报新财产
selectedTab = 0;
更新所选索引更改事件的属性
selectTab(event) {
this.selectedTab = event;
}
通过使用*matTabContent
可以实现更清晰的解决方案,ng-template
可以装饰<mat-tab-group>
<mat-tab label="Employee">
<app-employee *matTabContent></app-employee>
</mat-tab>
<mat-tab label="Department">
<app-department *matTabContent></app-department>
</mat-tab>
<mat-tab label="Attendance">
<app-attendance *matTabContent></app-attendance>
</mat-tab>
</mat-tab-group>
标签并从中读出模板。
qazxswpoi
请记住,每次打开选项卡时,都会(重新)初始化相应的组件。