angular RouterLinkActive not matching child paths

Question

I am relatively new to Angular and am trying to get a highlight to work on my NavBar. I have been through some other articles but they are not quite helping.

In my app-routing.ts file

const routes: Routes = [
 { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
 { path: 'dashboard', component: DashboardComponent },
 { path: 'guided-trades', component: GuidedTradeComponent },
 { path: 'guided-trade-detail/:id', component: GuidedTradeDetailComponent }, 
 { path: "**", redirectTo: '/dashboard'}
];

In my app.component.html file

<ul class="navbar-nav">
  <li class="nav-item">
    <a id="positions" class="nav-link" routerLink="/positions" routerLinkActive="active">Positions</a>
  </li>         
  <li class="nav-item">
    <a id="guidedtrades" class="nav-link" routerLink="/guided-trades" routerLinkActive="navlinkactive">Guided Trades</a>
  </li>
</ul>  

in my guides-trade.component.ts file I have list which when a row is clicked navigates me to the detail record for that item (this works fine and I get to the correct page)

onRowClicked(row) {
  this.router.navigateByUrl('/guided-trade-detail/' + row.recID);
}

in my styles.css file

.navlinkactive {
  border-bottom: 4px solid #007dba;
 }

When I click Guides Trades from the Nav Bar it highlights correctly. However, what I would like is that if I have navigated to the Guided Trade detail record the Guides Trades Nav Item is still highlighted. I have played around with trying children routes in the app-routing.ts file but I just can't get it to work.

Would it just be easier to add something like [ngClass]="{'active': guidedtradedetail.isActive }" to the navlink in the app.component.html file?

Answer 1

您需要将routerLinkActiveOptions精确设置设置为false

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: false}">