Angular 2 using routerLinkActive with path based arguments in URL

Question

My app has 2 routes, a dashboard and a details page with an ID as a part of the url.

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

For my nav bar, I have 2 links, Dashboard and Training . When I'm on the details page, (eg. /documents/01e328b8-822d-46d8-8229-78f4afb2e372/), the Training link should be highlighted. However, clicking on Training should never do anything.

This is what I have currently, this highlights the Training link correctly based on the URL. However clicking on Training triggers a Cannot match any routes. URL Segment: 'documents' Cannot match any routes. URL Segment: 'documents' error in the console.

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

How can I achieve what I want to do without adding a href/routerLink to the Training Link?

Answer 1

Because in the second link you have not passed and document id so it may be throwing an error of it.

Configure for the same url navigation to ignore.

Angular - Navigate to current same URL with component reload not the whole page

Check the above link

Answer 2

Ended up getting the current url from router.url and using [ngClass] instead of [routerLinkActive] . Not my ideal solution but it works and and might make more sense.

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