带有重定向路由的 Angular RouterLinkActive

Question

当使用带有路由参数的路由时，我发现routerLinkActive的方式很有趣。 该行为仅在使用重定向路由时发生。

考虑具有以下两条路线的应用程序：

  { path: 'page2/:id', component: Page2Component },
  { path: 'page2', redirectTo: '/page2/', pathMatch: 'full' },

并且，在同一个应用程序中，带有这些链接的页面带有routerLinkActive ：

      <a 
        routerLink="/page2" 
        routerLinkActive="active"
        [routerLinkActiveOptions]="{exact: true}">Page 2</a>

      <a routerLink="/page2/foo" routerLinkActive="active">Page 2 / Foo</a>

我希望第一个链接（/page2）仅在 url 为/active而不是当 url 为/active/foo时才具有active类。 但是，当我有上面显示的redirect路由时，第一个链接永远不会将active类应用于它。

如果我只有第二条路由而不是重定向路由，它会按预期工作，如下所示：

  { path: 'page2/:id', component: Page2Component },
  { path: 'page2', component: Page2Component },

但是，使用重定向路由是一种更好的做法，因为当从自身导航到自身时（即从/page2/foo导航到/page2/bar ），组件不会重新加载。 所以我更喜欢重定向路由，但我看不到在使用重定向路由时如何让[routerLinkActiveOptions]="{exact: true}"工作。

以下是 stackblitz 中的示例：

重定向路由的损坏示例： https ://stackblitz.com/edit/angular-ivy-ii1882?file=src/app/app.module.ts

非重定向路由的工作示例： https ://stackblitz.com/edit/angular-ivy-rh1tj1?file=src/app/app.module.ts

有没有一种解决方案可以让我同时拥有重定向路由和工作routerLinkActiveOptions ？

Answer 1

编辑：这个问题的真正答案是使用查询字符串而不是路由参数作为可选参数。 有关更多信息，请参见下文。

最初我的回答是正确的方法是传递一个空参数作为 routerLink 的一部分，如下所示：

[routerLink]="['page2', '']"

编辑：但实际上，这种方法还有另一个副作用。 设置为[routerLink]="['page2', '']"的 routerLinks 就像在routerLinkActiveOptions {exact: true}设置为 true 一样，即使没有添加routerLinkActiveOptions 。 这是因为它专门寻找带有空字符串作为参数的路由。 这里真正的解决方案是在不需要参数的情况下使用查询字符串参数而不是路由参数。

旁注：看起来routerLink="page2"确实可以以相同的方式工作，并且我最初的错误报告已更改为功能请求： Github 问题