angular - 如何在同一个路由器链接上使用多个 URL

Question

我正在做一个 angular 的小测试项目，我想包括一个使用 angular router outlet 的侧面导航。我希望有两个链接:

<a class="nav-link text-white" [routerLink]='["/link/to/one"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: true }">Component 1</a>
<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: true }">Component 2</a>

可以从其中一个组件导航到几个子页面。但它们不需要显示为路由器链接。

所以我的网站的结构可以是例如:

|-Comopnent 1
|
|-Component 2
   |- Component 3 
   |- Component 4 

所以我希望用户能够通过路由器链接导航到 Component2。从这个组件，用户可以通过代码重定向到组件 3 和 4。但我不希望它们有额外的路由器链接，我希望导航菜单中仍然突出显示组件 2。

在我的 app.module.ts 中，我基本上声明了路由:

RouterModule.forRoot([
  { path: '', component: HomeComponent, pathMatch: 'full'},
  { path: '/link/to/one', component: Component1 },
  { path: '/another/link/to/component', component: Component2 },
])

如何从Component2调用Component3&4，让路由在导航栏中高亮显示Component2？

问候

Answer 1

您只需将 Component3 和 Component4 设置为在子路由上显示即可。

因此您的路由器配置将类似于:

[
  { path: 'one', component: OneComponent },
  { path: 'two', component: TwoComponent, children: [
      { path: 'three', component: ThreeComponent },
      { path: 'four', component: FourComponent },
    ] 
  },
]

然后 routerLinkActive 会处理剩下的事情。

在 active CSS 类中，我将 color 设置为 red。因此，无论哪个链接处于事件状态，它都会变成红色。

您也可以通过在地址栏中手动输入 /two/three 或 /two/four 来测试它。

---

Here's a Working Sample StackBlitz for your ref.