Question

我正在做一个关于角度的小测试项目，我想使用角度路由器插座进行侧面导航。我希望有两个链接：

<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

您可以通过简单地设置cloneEquality和Component3使其在子路线上显示来实现。

所以您的路由器配置将类似于：

Component4

然后[ { path: 'one', component: OneComponent }, { path: 'two', component: TwoComponent, children: [ { path: 'three', component: ThreeComponent }, { path: 'four', component: FourComponent }, ] }, ]将负责其余的工作。

在routerLinkActive CSS类中，我将active设置为color。因此，无论哪个链接处于活动状态，都会显示红色。

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

这是您推荐的Working Sample StackBlitz。

Answer 2

TL; DR

将Component 3和Component 4路由配置为Component2的子级，然后从链接到[routerLinkActiveOptions]="{ exact: true }"的{{1}}中删除routerlink。

说明

我认为您已经知道答案了，关键是Component2。

首先，按如下所示配置您的路线：

routerLinkActiveOptions

然后，更改您的RouterModule.forRoot([ { path: '', component: HomeComponent, pathMatch: 'full'}, { path: '/link/to/one', component: Component1 }, { path: '/another/link/to/component', component: Component2, children: [ { path: '/component3', component: Component3 }, { path: '/component4', component: Component4 }, ], }, ])

之前：

routerLinkActiveOptions

之后：

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

区别是<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: false }">Component 2</a。

但是，[routerLinkActiveOptions]="{ exact: false }"的默认值为routerLinkActiveOptions.exact，因此与删除false相同。

routerLinkActiveOptions

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

2 个答案:

TL; DR

说明