如何routerLinkActive非锚链接

Question

我的应用程序组件上有两个链接

<a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>    --> app/dashboard
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>          --> app/heroes

点击一个英雄后，我进入“英雄细节”屏幕，但“英雄”链接未激活。

当我在app / detail /：id时，我想强调“英雄”主播

path: 'detail/:id'

那是我的完整路线const：

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'detail/:id',
    component: HeroDetailComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  },
  {
      path: 'heroes',
      component: HeroesComponent
  }
];

你的帮助表示赞赏

Answer 1

只有我知道在路由上启用routerLinkActive的方法才是使用子路由。像这样更新路线：

{path: 'heroes',children: [
    {path: "", component: HeroesComponent},
    {path: "detail/:id", component: HeroDetailComponent}
]}

将让你导航到/heroes和/heroes/detail/:id并离开/heroes作为主动路线

此外，如果您不希望在父路线上出现此行为，您可以添加到路线中的选项，您可以找到那些here