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

【问题标题】：Angular mat-tab lazy load and keep data between tabsAngular mat-tab 延迟加载并在选项卡之间保留数据
【发布时间】：2019-08-14 14:34:45
【问题描述】：

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

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

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

有什么建议可以在这里使用延迟加载吗？

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

【问题讨论】：

来自official docs 关于角度材料延迟加载，它说可以通过在具有 matTabContent 属性的 ng-template 中声明主体来延迟加载选项卡内容。 你可以也可以参考this thread和this thread提供的方法。

标签： angular angular-material internet-explorer-11 angular7 lazy-loading

【解决方案1】：

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

【讨论】：

不幸的是我不知道标签是动态的！
无论如何，您都会以某种方式获得选项卡列表，因此在获得选项卡时填写该对象。如果您没有任何 ID，请使用一些选项卡 ID 作为每个选项卡的键或索引。

【解决方案2】：

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

【讨论】：

但它并没有按照 OP 的要求“保留数据”。每次切换时，它都会再次加载数据。