Angular 使用<；路由器出口>；，在mat选项卡中，内容路由组件被初始化（构造函数和初始化）两次

我已经创建了一个mat选项卡组，并使用ng for使用router outlet加载选项卡，当我添加新选项卡并导航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>

问题是，当第一次调用subscribe函数时，它会在tab下成功加载路由。下一次调用它时，指定url的组件将构造两次，上一个选项卡内容将显示新的选项卡内容（上一个选项卡内容将丢失）

第一次调用subscribe时 ----- 表1（选定）| ------ 表1内容

当调用第二次订阅时 表1 |表2（选定）| 表2内容

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

---

表1（选定）|表2 表2内容

---

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

提前谢谢

 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 });
 });