Angular mat-tab 延迟加载并在选项卡之间保留数据

问题描述 投票:0回答:3

我正在使用 Angular Material mat-tab,每个选项卡都有动态表单的内容。

我正在尝试使用延迟加载方法,以避免在开始时加载所有选项卡内容,并且仅加载每个选项卡以提高性能,特别是在 Internet Explore 中。

我面临的问题是,每次我更改选项卡并丢失我输入的数据时,它都会重新加载选项卡。

有什么建议如何在这里使用延迟加载吗?

 <mat-tab-group [(selectedIndex)]="selectedTab"  
   (selectedIndexChange)="tabChange($event)">
     <mat-tab #tab *ngFor="let page of dataset;  let tabIndex = 
        index; trackBy: tabIndex;" [label]="page.title">
       <ng-container   *ngFor="let section of 
         page.groupedSections">
         //I am loosing the data here if i do lazy-loading
        <dynamic-form [fields]="section.fields"></dynamic-form> 
       </ng-container>
     </mat-tab>
 </mat-tab-group>
angular angular-material internet-explorer-11 angular7 lazy-loading
3个回答
1
投票

如果您有已知数量的选项卡及其名称,则可以使用选项卡名称作为键和空值来创建一个对象。然后,您迭代模板中该对象的键列表。然后,当用户第一次单击任何选项卡时,它将加载数据并将其存储在全局对象中的正确键中。然后只需从该对象读取数据而无需发出另一个请求。


0
投票

只需使用

ng-template
并将要在导航上加载的选项卡保留在
ng-template
内,选项卡内容仅在单击选项卡时加载。


0
投票

在 mat-tab-groupd 上使用

preserveContent
<ng-template matTabContent>
,如下所示:

<mat-tab label="First">
    <ng-template matTabContent>
      Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
    </ng-template>
  </mat-tab>

此组合将延迟加载选项卡并使其保持活动状态。

如果您想立即加载选项卡,请跳过该部分并将选项卡内容直接放入其中。

文档

© www.soinside.com 2019 - 2024. All rights reserved.