中间带有参数的角度动态路径激活问题

Question

这是问题，我有以下路径：

const routes: Routes = [{
    path: '',
    component: UserComponent,
    children: [
      { path: "client/select/nodes", component: ClientSelectionComponent, canActivate: [MasterGuard], data: { guards: [GUARDS.AUTH] } },
      { path: "client/:clientID/nodes", component: ClientNodesComponent, canActivate: [MasterGuard], data: { guards: [GUARDS.AUTH] } },
    ]
}];

和

<a *ngFor="let item of navItems" [routerLink]="item.url" routerLinkActive="active-tab" [routerLinkActiveOptions]="{matrixParams:'ignored', paths:'subset', queryParams:'ignored', fragment:'ignored'}">{{item.name}}</a>

单击

client/select/nodes

时，会将

active

类添加到

a

元素中。因为它是导航项中存在的真实路径，并且 routerlinks 知道它，并且此 URL 加载客户端选择组件，它们从列表中选择客户端并导航到实际加载真实页面的

/client/:clientID/nodes

。

我仍然希望

/client/select/nodes

的项目通过忽略

active

属性上的路径参数来获得

routerLinkActive

类。

当我将 URL 变为

/client/nodes/:clientID

时，我就实现了这一点，因为比较

subset

是有意义的。然而，这并没有让我感觉这个 URL 反映了页面意图。看起来这个 URL 上的

:clientID

实际上是一个节点 id：例如

/clients/nodes/1

。

我需要一种方法能够在检查 URL 的 isActive 时忽略路径参数，因此无论在

/clients

和

/nodes

之间写入什么内容，它都会激活

/client/select/nodes

的按钮。

真正的代码要复杂得多，因为整个导航系统是一个复杂的组件，有自己的

navItem

类型的对象以及下拉元素等的内部调用。

我试图将其简化为更简单的问题，仅反映我的意思，并且硬编码的答案将不起作用，因为整个系统适用于动态

navItem

对象。

Answer 1

在查阅了所有文档并进行了大量搜索之后，我最终得到了这样一个自定义解决方案，如下所示：

路由器模块

const routes: Routes = [{
    path: '',
    component: UserComponent,
    children: [
      { path: "client/nodes", component: ClientSelectionComponent, canActivate: [MasterGuard], data: { guards: [GUARDS.AUTH] } },
      { path: "client/:clientID/nodes", component: ClientNodesComponent, canActivate: [MasterGuard], data: { guards: [GUARDS.AUTH] } },
    ]
}];

HTML

<a *ngFor="let item of navItems"
[routerLink]="item.url"
routerLinkActive="active-tab"
[routerLinkActiveOptions]="{matrixParams:'ignored', paths:'subset', queryParams:'ignored', fragment:'ignored'}"
class.active-tab]="shouldCustomActivate(navItem)">{{item.name}}</a>

TS

let navItems = [
  {
    name: "Nodes",
    url: "/client/nodes",
    activateAsProxyRegex: "/client/[0-9]+/nodes"
  },
  {
    name: "Lists",
    url: "/client/lists",
    activateAsProxyRegex: "/client/[0-9]+/lists"
  }
]

protected shouldCustomActivate(navItem: NavMenuItem): string {
  let proxyUrl = navItem.activateAsProxyRegex ? navItem.activateAsProxyRegex : '';
  if (proxyUrl === '')
    return "";

  if (!new RegExp(proxyUrl).test(this.router.url))
    return "";

  this.activateParent(true);
  this.emitChildSelected(true);
  return "active-tab";
}