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

如何routerLinkActive非锚链接

1 个答案: