angular - 如何使用 angular4 加载在选项卡中添加的组件？

Question

我正在使用 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>

现在所有组件都已初始加载，但我想在选择相应选项卡时加载特定组件。

Answer 1

注意。 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