Angular mat-tab отложенная загрузка и сохранение данных между вкладками

Я использую матовую вкладку Angular Material, и каждая вкладка имеет содержимое динамических форм.

Я пытаюсь использовать ленивую загрузку, чтобы избежать загрузки всего содержимого вкладок в начале и загружать только каждую вкладку, чтобы повысить производительность, особенно в 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 lazy-loading angular7 internet-explorer-11
person Mo Halem    schedule 14.08.2019    source источник
comment
В официальных документах об отложенной загрузке материалов angular говорится: Содержимое вкладки может быть загружено лениво, объявив тело в ng-шаблоне с атрибутом matTabContent. Вы также можете обратиться к методам, предоставленным в этот поток и эту ветку.   -  person Yu Zhou    schedule 15.08.2019

Ответы (2)


arrow_upward
0
arrow_downward

Если у вас есть известное количество вкладок и их имена, вы можете создать объект с именами вкладок в качестве ключей и пустыми значениями. Затем вы просматриваете список ключей этого объекта в шаблоне. Затем, когда пользователь щелкает любую вкладку в первый раз, он загружает данные, и они будут сохранены в правильном ключе в глобальном объекте. Затем просто прочтите данные из этого объекта, не делая еще одного запроса.

person igor_c    schedule 14.08.2019
comment
к сожалению, я не знаю, что вкладки динамические! - person Mo Halem; 14.08.2019
comment
В любом случае вы каким-то образом получаете список вкладок, поэтому заполните этот объект, когда получите вкладки. И используйте некоторый идентификатор вкладки в качестве ключа для каждого из них или индекса, если у вас нет идентификатора. - person igor_c; 14.08.2019

arrow_upward
0
arrow_downward

Просто используйте ng-template и сохраните вкладку, которую хотите загрузить при навигации, внутри ng-template, содержимое вкладки будет загружаться только при нажатии на вкладку.

person kaustuv bharadwaj    schedule 16.07.2021