Angular 角垫选项卡延迟加载并在选项卡之间保留数据

我使用角材料垫选项卡，每个选项卡都有动态形式的内容

我正在尝试使用延迟加载方法，以避免在开始时加载所有选项卡内容，并且只加载每个选项卡，以提高性能，特别是在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>

//如果我延迟加载，我将丢失这里的数据

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

不幸的是，我不知道选项卡是动态的！不管怎样，你总会得到标签列表，所以当你得到标签时，把这个对象填满。并使用一些选项卡id作为每个选项卡的键，或者如果没有任何id，则使用索引。从about angular material lazy loading可以看出，选项卡内容可以通过使用matTabContent属性在ng模板中声明主体来延迟加载。您还可以参考和中提供的方法。