Angular mat-tab 延遲加載並在選項卡之間保留數據

Question

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

Answer 1

如果您有已知數量的選項卡及其名稱，則可以創建一個以選項卡名稱作為鍵和空值的對象。 然后遍歷模板中該對象的鍵列表。 然后，當用戶第一次單擊任何選項卡時，它將加載數據並將其存儲在全局對象中的正確鍵中。 然后只需從該對象讀取數據，而無需發出其他請求。

Answer 2

只需使用ng-template並將要加載的選項卡保留在ng-template中的導航中，該選項卡內容僅在單擊該選項卡時加載。