如何在同一路由器链接上使用多个 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。但我不希望他们有额外的路由器链接，我希望导航菜单中仍然突出显示 component2。

在我的 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将照顾其余的。

在activeCSS类，我已经设置color到red。所以无论哪个链接处于活动状态，它都会变成红色。

您还可以通过手动输入/two/three或/two/four在地址栏中进行测试。

这是供您参考的工作示例 StackBlitz。