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>

问题是当我在数组中打开的选项卡之间导航时，每个选项卡的数据都与以下两者之一保持一致：1）最后打开的选项卡我将dByUrl导航到2）最后一个选项卡在返回固定位置后取消标签。它仅在具有与EDIT1中所述相同的网址格式的选项卡之间发生。

EDIT1：

我刚刚测试过打开多个指向同一路线但具有不同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

问题

作为您的解释，您似乎在data中共享了tab。将tab添加到tabs时，可能会使用相同的引用。

修复

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

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

服务等级

public tabs: Tab[] = []

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

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

1 个答案:

问题

修复

服务等级