使用 <router-outlet> 延迟加载 mat-tab 内容时，在 mat-tab 内容中，路由组件会初始化两次（构造函数和 Init）

Question

我创建了一个 mat 选项卡组，并使用 ng-for 使用路由器出口加载选项卡，当我添加新选项卡并导航 url 时，我的新路由组件被构造了两次，并且以前的选项卡内容被新内容替换。

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>

打字代码：

导出类 MyTabComponent 实现 OnInit { 公共选项卡：任何； // 我在 HTML 中循环的属性 公共选择 = 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内容

当第二次订阅被调用时

选项卡1 | Tab2（已选择）|

选项卡2内容

当我单击 tab1 时，我看到 tab2 内容（我面临的问题）

---

选项卡1（已选择）|选项卡2

选项卡2内容

---

有人可以帮忙吗，为什么在添加第二个选项卡时我之前的选项卡内容也加载了第二个组件。

提前致谢。

Answer 1

尝试将路由器出口包装在#matTabContent中

 <mat-tab-group class="kb-config-tabs" [animationDuration]="tabAnimationDelay" (selectedTabChange)="tabChange($event)"
                    [selectedIndex]="selectedTabIndex">
                    <mat-tab *ngFor="let tab of tabConfig">
                        <ng-template mat-tab-label >
                            {{tab.label}}
                        </ng-template>
                        <ng-template matTabContent>
                            <router-outlet></router-outlet>
                        </ng-template>
                    </mat-tab>
                </mat-tab-group>