我正在使用 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>
现在所有组件都已初始加载,但我想在选择相应选项卡时加载特定组件。
最佳答案
注意。 Angular Material 最近已更新,组件已重命名,例如<md-tab>
现在是<mat-tab>
.文档:https://material.angular.io/components/tabs/api
您想要的是延迟加载 选项卡内容。根据 Angular Material 文档,目前似乎不可能。
这里有一些解决方法:
选项 1. 根据标签组的 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
关于angular - 如何使用 angular4 加载在选项卡中添加的组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46902829/