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

Question

我使用的是角度材料垫标签，每个标签都有动态表单的内容。

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

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

有什么建议如何在这里使用lazyloading吗？

 <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>

Answer 1

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

Answer 2

只需使用ng-template并将您想要在导航时加载的选项卡保留在ng-template中，该选项卡内容将仅在单击该选项卡时加载。