我是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;
}
当我从导航栏单击“指南交易”时，它会正确突出显示 . 但是，我想要的是，如果我导航到Guided Trade详细记录，则仍会突出显示Guides Trades Nav Item . 我在app-routing.ts文件中玩过尝试子路由，但我无法让它工作 .
将[ngClass] = "{'active': guidedtradedetail.isActive }"之类的内容添加到 app.component.html 文件中的navlink会更容易吗？
1 回答
您需要将routerLinkActiveOptions精确设置为
false