mat-tab懒加载选项卡仅一次

时间:2018-10-10 15:54:58

标签: angular angular-material angular6

我正在使用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>

2 个答案:

答案 0 :(得分:1)

1。在ts文件中声明空变量

例如。 let data = undefined;

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

数据=响应

3。仅在data = undefined时调用API

我想这对你有用

答案 1 :(得分:1)

在mat-tab-group上使用事件selectedIndexChange,然后将内容放入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