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

当我从导航栏中单击指南交易时，它将正确突出显示。但是，我想要的是，如果我已导航到“引导交易”明细记录，则“引导交易”导航项目仍会突出显示。我在app-routing.ts文件中尝试过尝试儿童路线，但是我无法使其正常工作。

在[strong> app.component.html 文件中的导航链接中添加[ngClass] =“ {'active'：guidedtradedetail.isActive}”之类的内容会更容易吗？

Answer 1

您需要将routerLinkActiveOptions的确切设置设为false

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

角RouterLinkActive不匹配子路径

1 个答案: