mat-tab 延迟加载选项卡仅一次

Question

我正在使用 Angular Material mat-tab，它被设置为延迟加载选项卡内容。

由于默认情况下加载第一个选项卡，因此我将第二个选项卡设置为延迟加载。

我看到当我在标签之间反复导航时，第二个标签的内容每次都会新鲜加载。我有一个 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

使用selectedIndexChangemat-tab-group 上的事件并将您的内容放入带有 ngIf 的 div 中，如下所示：

<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 文件中声明空变量

例如。 let data = undefined;

2.将您的 Api 数据存储在声明的变量中

data = Response

3.仅在以下情况下调用APIdata === undefined

我希望这对你有用。