1

我创建了一个 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 中循环的属性 public 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 的组件被构造两次，之前的 tab 内容显示新的 tab 内容（之前的 tab 内容丢失）。

首次订阅时 ----- Tab1 (selected) | ------ Tab1 内容

当第二次订阅被调用时

表 1 | Tab2(已选) |

Tab2 内容

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

Tab1(选中) | 选项卡2

Tab2 内容

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

提前致谢。

4

0 回答 0