Angular (Angular 4) RouterLinkActive 用于菜单和子菜单配置

Question

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

-------------------------
|   A   |   B   |   C   |
-------------------------
| 1 | 2 | 3 | 4 | 5 | 6 |
-------------------------

例如，如果我选择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']),
];

通过此设置，单击A将转到/A/1，并且A和1都处于"活动状态"。但是当我单击子菜单时，比如说2，那么A不再"活动"，因为它与/A/1匹配(这是有道理的，这就是它链接到的内容)。

有没有办法指定我想只在A上匹配？

https://embed.plnkr.co/BQKy67J2OfVskmwPbTDl

Answer 1

问题在于您的路由和您对Link的定义。您应该只定义链接中的父组件。否则，它仅与(A|B|C)/1匹配。

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

然后在子路由中使用redirectTo。

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

检查编辑的 plunkr。