Angular 2 在 URL 中使用基于路径的 arguments 的 routerLinkActive

Question

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

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

对于我的导航栏，我有 2 个链接， Dashboard和Training 。 当我在详细信息页面上时（例如 /documents/01e328b8-822d-46d8-8229-78f4afb2e372/），应该突出显示Training链接。 但是，单击“ Training ”绝不应该做任何事情。

这就是我目前所拥有的，它基于 URL 正确突出了Training链接。 但是，单击Training会触发Cannot match any routes. URL Segment: 'documents' 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链接添加 href/routerLink 的情况下，如何实现我想做的事情？

Answer 1

因为在第二个链接中您没有传递和文档 ID，所以它可能会引发错误。

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

Angular - 导航到当前相同的 URL 组件重新加载而不是整个页面

检查上面的链接

Answer 2

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

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