ленивая загрузка вкладки mat-tab только один раз

Question

Я использую матовую вкладку Angular Material, и она настроена на отложенную загрузку содержимого вкладок.

Поскольку первая вкладка загружена по умолчанию, я установил вторую вкладку для отложенной загрузки.

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

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

<mat-tab-group>
  <!--Roles Tab-->
  <mat-tab class="tabLabel" label="Roles">
    <app-roles></app-roles>
  </mat-tab>
  <!--Admins Tab-->
  <mat-tab class="tabLabel" label="Admins">
    <!-- Lazy load below component -->
    <ng-template matTabContent>
      <app-admins></app-admins>
    </ng-template>
  </mat-tab>
</mat-tab-group>

Answer 1

Используйте событие selectedIndexChange на mat-tab-group и поместите ваш контент в div с помощью ngIf, например:

<mat-tab-group (selectedIndexChange)="tabChange($event)">
  <mat-tab label="Today">
    <ng-template matTabContent>
    <hello name="{{ name }}"></hello>
    </ng-template>
  </mat-tab>
   <mat-tab label="Yesterday">
     <div *ngIf="yesterDayTabShow">
    <hello name="Test"></hello>
     </div>
  </mat-tab>
</mat-tab-group>

См. Ссылку: https://stackblitz.com/edit/angular-tu7jsg

Answer 2

1.Декларируйте пустую переменную в вашем файле ts

например.пусть data = undefined;

2.Сохранить ваши API-данные в объявленной переменной

data = Response

3. Вызов API, только если data = undefined

Я надеюсь, что это будет работать для вас