[英]angular RouterLinkActive not matching child paths
我是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时 ,它会正确突出显示。 但是,我想要的是,如果我已导航到“引导交易”明细记录,则“引导交易”导航项目仍会突出显示。 我在app-routing.ts文件中尝试过尝试子级路由,但是我无法使其正常工作。
在app.component.html文件的navlink中添加[ngClass] =“ {'active':guidedtradedetail.isActive}”之类的内容会更容易吗?
您需要将routerLinkActiveOptions
精确设置设置为false
<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: false}">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.