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