Mat-tab загрузить внутренний компонент после выбранной вкладки - PullRequest
Новая
       31

Mat-tab загрузить внутренний компонент после выбранной вкладки

0 голосов
/ 20 января 2019

Я использую Mat-tab в угловой материал версии 7.2.1

Каждая вкладка содержит отдельный компонент.

Как показано ниже: 

<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 во внутреннем компоненте для загрузки данных, попадание при загрузке страницы и не при выборе вкладки .

Как я могу изменить это поведение?

1 Ответ

0 голосов
/ 20 января 2019

Попробуйте вызвать изменение во вкладке: 

<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 секунд после инициализации внутреннего компонента.

...