angular - routerLinkActive matching routes with different query parameters -

this code generates handful of links like

/reports

/reports?collection=foo

/reports?collection=bar

all links shown active. how can show 1 exact link active?

<li [routerlinkactive]="['link-active']" [routerlinkactiveoptions]="{exact: true}">   <a [routerlink]="['/reports']">     <span class='glyphicon glyphicon-expand'></span> reports   </a> </li> <li [routerlinkactive]="['link-active']" [routerlinkactiveoptions]="{exact: true}" *ngfor="let collection of collections">   <a [routerlink]="['/reports']" [queryparams]="{collection: collection}">     <span class='glyphicon glyphicon-unchecked'></span><span>{{collection}}</span>   </a> </li> 

query , optional parameters not included when specifying route configuration , when matching routes. that's why exact: true not working you.

if need ensure routes treated differently, try using required parameters instead. specifics of routes defined in configuration , considered when router matches routes.