帶有重定向路由的 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 問題