Javascript 角度（角度4）RouterLink对于菜单和子菜单配置处于活动状态

我的应用程序有一个菜单和一个子菜单。当他们点击菜单时，我需要该菜单项和第一个子菜单项处于“活动”状态

例如，如果我选择

A

，则

A

和

1

都是“活动的”。如果我选择

B

，则

B

和

1

都处于“活动”状态。与

C

相同

路线

const subMenuRoutes: Routes = [
  { path: '0', component: ContentComponent }, 
  { path: '1', component: ContentComponent },
  { path: '2', component: ContentComponent },
  { path: '3', component: ContentComponent },
  { path: '4', component: ContentComponent },
  { path: '5', component: ContentComponent },
  { path: '6', component: ContentComponent },
];

const menuRoutes: Routes = [
  { path: 'A', component: SubMenuComponent, children: subMenuRoutes }, 
  { path: 'B', component: SubMenuComponent, children: subMenuRoutes },
  { path: 'C', component: SubMenuComponent, children: subMenuRoutes },
];

links = [
  new Link('A', ['/A', '1']),
  new Link('B', ['/B', '1']),
  new Link('C', ['/C', '1']),
];

links = [
  new Link('1', ['1']),
  new Link('2', ['2']),
  new Link('3', ['3']),
  new Link('4', ['4']),
  new Link('5', ['5']),
  new Link('6', ['6']),
];

菜单链接

const subMenuRoutes: Routes = [
  { path: '0', component: ContentComponent }, 
  { path: '1', component: ContentComponent },
  { path: '2', component: ContentComponent },
  { path: '3', component: ContentComponent },
  { path: '4', component: ContentComponent },
  { path: '5', component: ContentComponent },
  { path: '6', component: ContentComponent },
];

const menuRoutes: Routes = [
  { path: 'A', component: SubMenuComponent, children: subMenuRoutes }, 
  { path: 'B', component: SubMenuComponent, children: subMenuRoutes },
  { path: 'C', component: SubMenuComponent, children: subMenuRoutes },
];

links = [
  new Link('A', ['/A', '1']),
  new Link('B', ['/B', '1']),
  new Link('C', ['/C', '1']),
];

links = [
  new Link('1', ['1']),
  new Link('2', ['2']),
  new Link('3', ['3']),
  new Link('4', ['4']),
  new Link('5', ['5']),
  new Link('6', ['6']),
];

子菜单链接

const subMenuRoutes: Routes = [
  { path: '0', component: ContentComponent }, 
  { path: '1', component: ContentComponent },
  { path: '2', component: ContentComponent },
  { path: '3', component: ContentComponent },
  { path: '4', component: ContentComponent },
  { path: '5', component: ContentComponent },
  { path: '6', component: ContentComponent },
];

const menuRoutes: Routes = [
  { path: 'A', component: SubMenuComponent, children: subMenuRoutes }, 
  { path: 'B', component: SubMenuComponent, children: subMenuRoutes },
  { path: 'C', component: SubMenuComponent, children: subMenuRoutes },
];

links = [
  new Link('A', ['/A', '1']),
  new Link('B', ['/B', '1']),
  new Link('C', ['/C', '1']),
];

links = [
  new Link('1', ['1']),
  new Link('2', ['2']),
  new Link('3', ['3']),
  new Link('4', ['4']),
  new Link('5', ['5']),
  new Link('6', ['6']),
];

使用此设置，单击

A

将转到

/A/1

，并且

A

和

1

都处于“活动”状态。但是当我点击子菜单时，比如说

2

，那么

A

就不再是“活动的”，因为它与

/A/1

匹配（这很有意义，这就是它链接的内容）

有没有办法指定我只想在

a

上匹配

---

问题在于您的路由和

链接的定义。您应该只定义链接中的父组件。否则，它只匹配
（A | B | C）/1

links = [
  new Link('A', ['/A']),
  new Link('B', ['/B']),
  new Link('C', ['/C']),
];

然后在子路由中使用
重定向到

const subMenuRoutes: Routes = [
  { path: '',  pathMatch: 'full', redirectTo: '1' }
  { path: '0', component: ContentComponent }, 
  { path: '1', component: ContentComponent },
  { path: '2', component: ContentComponent },
  { path: '3', component: ContentComponent },
  { path: '4', component: ContentComponent },
  { path: '5', component: ContentComponent },
  { path: '6', component: ContentComponent },
];

此外，您不必直接重定向到子路由；重定向到父级，让它处理重定向到子路由。在我看来，这种方式更加模块化

const menuRoutes: Routes = [
  { path: 'A', component: SubMenuComponent, children: subMenuRoutes }, 
  { path: 'B', component: SubMenuComponent, children: subMenuRoutes },
  { path: 'C', component: SubMenuComponent, children: subMenuRoutes },
  { path: '**', redirectTo: 'A' }
];

检查。
您能解释一下您的期望吗？如果你能创建一个plunker@Aravind我加了一个扑通。不知道如何嵌入。。。如果有人可以，请编辑。：）@christo8989作为奖励，您的
链接
类可以是一个
接口
，因为它内部没有任何行为。