用于菜单和SubMenu配置的角(角4) SubMenu
用于菜单和SubMenu配置的角(角4) SubMenu
提问于 2017-07-15 19:15:49
我的应用程序有菜单和子菜单。当他们点击菜单，我需要这个菜单项和第一个子菜单项目是“活动的”。
-------------------------
| 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']),
];SubMenu Links
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上匹配
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-15 22:12:27
问题在于您的路由和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' }
];检查一下编辑柱塞。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45121892
复制相关文章
相似问题
腾讯云开发者
