Question

我正在使用angular4和angular material2。

我有以下代码

import cv2
import numpy as np

img=cv2.imread ('fw1.jpg')
print img.shape

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

Answer 1

NB。 Angular Material最近已更新，组件已重命名，例如<md-tab>现在是<mat-tab>。 DOC：https://material.angular.io/components/tabs/api

您想要的是延迟加载标签内容。根据Angular材料文档，目前似乎不可能。

以下是一些解决方法：

选项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

Answer 2

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;
}

Answer 3

使用*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>

请记住，每次打开选项卡时，相应的组件都会被（重新）初始化。

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

3 个答案: