在选定选项卡后加载内部组件

Question

我在 Angular 材料 7.2.1 版本中使用 Mat-tab

每个选项卡都包含一个不同的组件。

如下所示：

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      <span>Map</span>
    </ng-template>
      <app-health-education-map></app-health-education-map>
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
      <span>Form</span>
    </ng-template>
    <app-health-education-form></app-health-education-form>
  </mat-tab>
</mat-tab-group>

使用内部组件中的ngOnInit事件加载数据，在加载页面时命中，而不是在选择选项卡时命中。

如何更改此行为？

Answer 1

尝试在选项卡中触发更改：

<mat-tab-group selectedIndex="0" (selectedTabChange)="changeTab($event)">
  <mat-tab>
    <ng-template mat-tab-label>
      <span>search</span>
    </ng-template>
      <app-search></app-search>
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
      <span>home</span>
    </ng-template>
    <app-home  *ngIf="tabIndex === 1"></app-home>
  </mat-tab>
</mat-tab-group>

TS：

tabIndex = 0 ;
changeTab(event){
   this.tabIndex = event.index;
}

演示该名称将在初始化内部组件 5 秒后显示。