在帶有選項卡的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模板（該componant沒有別的）：

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

問題是當我在數組中打開的選項卡之間進行導航時，每個選項卡的數據都與以下兩者的數據保持一致：1）我將最后一個打開的選項卡導航到yyydByUrl到2）最后一個選項卡在返回固定選項卡后取消。 它僅在具有與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

我可以在導航，編輯，結果，創建之間沒有組件加載或數據更新問題的情況下進行導航。 但是，如果我在不同的編輯選項卡之間導航，則沒有任何變化，這是我的問題。

我的問題只在相同的網址格式之間，為什么？

Answer 1

問題

作為您的解釋，您似乎已在tab共享了data 。 將tab tabs添加到tab時，可能會使用相同的引用。

固定

在添加到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);
}