Angular 2 using routerLinkActive with path based arguments in URL

0
votes

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' 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?

2
angularangular2-routing

2 Answers

0
votes

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

0
votes

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>