Angular 2 在 URL 中使用带有基于路径的参数的 routerLinkActive

Question

我的应用程序有 2 条路线、一个仪表板和一个带有 ID 作为 url 一部分的详细信息页面。

RouterModule.forRoot([
  { path: '', component: DashboardComponent },
  { path: 'documents/:documentUUID', component: DocumentDetailComponent },
])

对于我的导航栏，我有 2 个 link、Dashboard 和 Training。当我在详细信息页面上时，（例如 /documents/01e328b8-822d-46d8-8229-78f4afb2e372/），Training link 应该突出显示。但是，点击 Training 应该不会有任何反应。

这是我目前所拥有的，它根据 URL 正确突出显示了 Training link。但是，单击 Training 会在控制台中触发 Cannot match any routes. URL Segment: 'documents' 错误。

<nav>
    <a routerLink="/" [routerLinkActive]="'is-current'" [routerLinkActiveOptions]="{exact: true}">Dashboard</a>
    <a routerLink="/documents/" [routerLinkActive]="'is-current'" [routerLinkActiveOptions]="{exact: false}">Training</a>
</nav>

如何在不向 Training Link 添加 href/routerLink 的情况下实现我想做的事情？

Answer 1

因为在第二个 link 中你没有传递文档 ID 所以它可能会抛出一个错误。

将相同的 url 导航配置为忽略。

勾选以上link

Answer 2

最终从 router.url 获取当前 url 并使用 [ngClass] 而不是 [routerLinkActive]。这不是我理想的解决方案，但它有效并且可能更有意义。

<a [ngClass]="{'is-current': router.url.startsWith('/documents/')}">Training</a>

Angular 2 在 URL 中使用带有基于路径的参数的 routerLinkActive

Angular 2 using routerLinkActive with path based arguments in URL

angular

angular2-routing