angular - angular RouterLinkActive が子パスと一致しない

Question

私はAngularに比較的慣れておらず、NavBarでハイライトを機能させようとしています。私は他の記事をいくつか読みましたが、あまり役に立ちません。

私のapp-routing.tsファイルで

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'}
];

私のapp.component.htmlファイルで

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

私のguides-trade.component.tsファイルには、行をクリックするとそのアイテムの詳細レコードに移動するリストがあります（これは正常に機能し、正しいページに移動します）

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

私のstyles.cssファイルで

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

ナビゲーション バーからGuides Tradesをクリックすると、正しく強調表示されます。ただし、Guided Trade の詳細レコードに移動した場合、Guides Trades Nav 項目がまだ強調表示されていることを望みます。app-routing.ts ファイルで子ルートを試してみましたが、うまく動作しません。

[ngClass]="{'active':guidetradedetail.isActive}" のようなものをapp.component.htmlファイルの navlink に追加する方が簡単でしょうか?