在带有选项卡的 Angular 6 RouterLink 上未正确加载组件

Question

标签的模板就是这样的：

<nav mat-tab-nav-bar
     class="nav-container">

<a mat-tab-link
   [routerLink]="'/fixedtabroute'"
   routerLinkActive #rla0="routerLinkActive"
   [active]="rla0.isActive">
  Fixed tab
</a>

<a mat-tab-link
   [routerLink]="tab.link"
   routerLinkActive #rla="routerLinkActive"
   [active]="rla.isActive"
   *ngFor="let tab of tabs"
   (mousedown)="closeTab($event, tab)">
  <mat-icon>{{ tab.icon }}</mat-icon>
  <p>{{ tab.title }}</p>
  <span>&nbsp;{{tab.index}}</span>

  <div class="tab-close">
    <a mat-icon-button (click)="crossClose($event, tab)">
      <mat-icon>close</mat-icon>
    </a>
  </div>
</a>
</nav>

我有一项服务可以通过数组跟踪打开的标签，因为您猜标签的数量不固定：

public tabs: Tab[] = [];

的

export interface TabInfo<T = any> {
  id: string;
  title: string;
  link: string;
  data?: T;
}
export class Tab<T = any> implements TabInfo<T> {
  public id: string;
  public title: string;
  public link: string;
  public data?: T;
  constructor(info: TabInfo<T>) {
    this.id = info.id;
    this.title = info.title;
    this.link = info.link;
    this.data = info.data;
  }
}

要激活/打开一个新选项卡，我的 TabService 提供了这个简单的方法（只能从固定选项卡调用此方法）：

  public activate(tab: Tab): void {
    this.router.navigateByUrl(tab.link);
  }

路由器是：

const appRoutes: Routes = [
  {
    path: '',
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'auth',
        component: UnauthenticatedContainerComponent,
        data: { excludeLogin: true },
        children: [
          { path: 'login', component: LoginComponent },
        ],
      },
      {
        path: '',
        component: AuthenticatedContainerComponent,
        data: { requireLogin: true },
        children: [
          { path: 'profile', component: ProfileComponent, resolve: { profile: ProfileResolve } },
          {
            path: '',
            component: RequestContainerComponent,
            children: [
              {
                path: '',
                redirectTo: 'requests',
                pathMatch: 'full',
              },
              { path: 'requests', component: RequestListComponent },
              { path: 'request/:id/create/:index', component: RequestComponent },
              { path: 'request/:id/results/:index', component: RequestResultListComponent, canActivate: [TabGuard] },
              { path: 'request/:id/edit/:index', component: RequestComponent, canActivate: [TabGuard] },
            ],
          },
        ],
      },
    ],
  },
  { path: '**', redirectTo: '/' },
];

固定标签是RequestListComponent每个标签可以是来自RequestContainerComponent的任何其他子标签

RequestContainerComponent 模板（组件不做任何其他事情）：

<app-tabs></app-tabs>
<div class="request-container-wrapper">
  <router-outlet></router-outlet>
</div>

问题是当我在数组中打开的选项卡之间导航时，每个选项卡的数据都与以下任一选项卡的数据相同标签。它只发生在具有与 EDIT1 中描述的相同 url 模式的选项卡之间。

---

编辑1：

我刚刚测试了打开多个指向同一路由但具有不同 ID 的选项卡，例如：

In tab 1 : /request/5c98c7eb77f998b79d2a53/edit/1
In tab 2 : /request/5c98cb8b77f998b79d2a58/edit/1
In tab 3 : /request/5c98c8fb77f998b79d2a55/results/1
In tab 4 : /request/5c98c8fb77f998b79d2a54/create/1

我可以在没有组件加载或数据更新问题的情况下导航：编辑、结果、创建。但是，如果我在不同的编辑选项卡之间导航，没有任何改变，我有我的问题。

我的问题只是在相同的 url 模式之间，为什么？

Answer 1

问题

作为您的解释，看起来您在tab 中分享了@98​​7654321@。当您将 tab 添加到 tabs 时，您可能会使用相同的引用。

修复

只需在添加到 tabs 变量之前对 tab 进行深度克隆。

在添加新标签之前最好删除同一标签的早期数据。

服务类

public tabs: Tab[] = []

public addTab(tab: Tab){
   let cloneTab = JSON.parse(JSON.stringif(tab));
   //remove the old matching tab here.
   this.tabs.push(cloneTab);
}