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

DEMO 该名称将在初始化内部组件5秒钟后出现。

选框标签在选定标签后加载内部组件

1 个答案: