Контролируемый рендеринг содержимого вкладок в угловых материалах вкладок

1

Я использую группу вкладок "Угловой материал".

<mat-tab-group>
  <mat-tab label="First"> <app-home> </app-home> </mat-tab>
  <mat-tab label="Second"> <app-info> </app-info> </mat-tab>
  <mat-tab label="Third"><app-details> </app-home> </mat-tab>
</mat-tab-group>

В ngOnInit(){} каждого компонента я ngOnInit(){} один или несколько API и когда мой компонент приложения отображает группу вкладок. содержимое всех вкладок загружается асинхронно, для этого вызывается все API всех компонентов. что снижает эффективность.

Я хочу управлять отображением содержимого вкладок так, чтобы отображалась только выбранная вкладка. этим я могу остановить ненужные вызовы других API.

Может ли кто-нибудь помочь мне, руководствуясь соответствующим событием или техникой для достижения этого?

  • 0
    не вызывайте все API в ngonInit по умолчанию, загружайте первую группу вкладок и вызывайте только этот API в ngoninit, тогда как на каждой вкладке нажмите другие API
Теги:
angular
angular6
angular-material

2 ответа

1
Лучший ответ

HTML

<mat-tab-group (selectedTabChange)="onTabClick($event)"

TS

public onTabClick(event: any): void { // clicked tab can be get using event.index
    // load data for the clicked tab
}
Поделиться
0

Другой подход, который полезен, если вы хотите обновить содержимое вкладки при изменении табуляции, это использовать ng-template с matTabContent. Пример,

<mat-tab-group>
  <mat-tab label="A">
    <ng-template matTabContent> Content of tab A </ng-template>
  </mat-tab>
  <mat-tab label="B">
    <ng-template matTabContent> Content of tab B </ng-template>
  </mat-tab>
</mat-tab-group>
Поделиться
  • 0
    На самом деле, я сделал то же самое и обновился до угловой 6 для этого.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню