при ленивой загрузке содержимого mat-tab с помощью , внутри содержимого mat-tab маршрутизируемый компонент инициализируется (конструктор и инициализация) дважды - PullRequest
Новая
       32

при ленивой загрузке содержимого mat-tab с помощью , внутри содержимого mat-tab маршрутизируемый компонент инициализируется (конструктор и инициализация) дважды

1 голос
/ 08 июля 2020
• 1000 * 
Sample Code:
mat-tab-group (selectedTabChange)="tabClick($event)" [selectedIndex]="selected.value"
  (selectedIndexChange)="onIndexChanged($event)" animationDuration="0ms">
   <mat-tab *ngFor="let tab of tabs; let i = index" [label]="tab">
    <ng-template mat-tab-label>     
      {{tab.Name}}
    </ng-template>        
   <router-outlet></router-outlet>           
  </mat-tab>
</mat-tab-group>

код typecrpt:

класс экспорта MyTabComponent реализует OnInit {publi c tabs: any; // свойство, которое я l oop в HTML publi c selected = new FormControl (); 

 ngOnInit() {
 this.myservice.NewTabArrived.subscribe(
  (newTab) => {

   let url = newTab.Url   // URL of comp to load in new tab
   this.tabs.push({tabName:newTab.Name}); // This is use din ngFor in html

   this.router.navigate([url], {relativeTo: this.activatedRoute });
 });

Проблема в том, что когда функция подписки в первый раз вызывала, она успешно загружает маршрут на вкладке. В следующий раз, когда он вызывается, компонент для указанного URL-адреса создается дважды, и содержимое предыдущей вкладки показывает содержимое новой вкладки (содержимое предыдущей вкладки теряется).

Когда вызывается первая подписка ----- Tab1 (выбрано ) | ------ Содержимое Tab1

При повторной подписке вызывается

Tab1 | Tab2 (выбрано) |

Tab2 Content

Когда я нажимаю tab1, я вижу содержимое tab2 (проблема, с которой я столкнулся)

Tab1 (выбрано) | Tab2

Содержимое Tab2

Может кто-нибудь помочь, пожалуйста, почему при добавлении второй вкладки содержимое моей предыдущей вкладки также загружается вторым компонентом.

Заранее спасибо.

...