带有angular2的子菜单

Question

我在页面左侧有一个菜单，左边还有另一个菜单，它是所选菜单的子菜单。为此，我创建了一个非终端路由'/ section / ...'并创建了一个带有另一个路由器插座的组件。 “section”文件夹中的组件也是路由器组件。我不得不使用这样的链接使其工作（这里必须添加“./”以使链接特定于此子组件）：

<a [routerLink]=" ['./Index'] ">Index</a>
<a [routerLink]=" ['./Test'] ">Test</a>

一切都很完美，但我想将目前我子菜单中的那些href转换为另一个单独的组件。我不想在每个部分硬编码我的菜单，我宁愿只是放置一个标签，并以某种方式指定要添加到该子菜单的链接。 这里的问题是我被卡住了，不知道如何将这些链接传递到子菜单组件，以便它们仍然指向正确的位置。 那么创建这样一个子菜单组件并将链接列表传递给它的最佳方法是什么？

Answer 1

我通过使用路径的单个参数作为菜单路径来解决了类似的用例，并使用路径路径（例如

）的实际内容的路径的另一部分

http://myapp/main_menu.sub_menu3.sub_sub_menu5/some_content/details

路由配置如

{path: '/:menu/...', name: 'MainArea', component: MainAreaComponent}

我将路由器注入导航栏组件并收听更改并根据传递的菜单参数更新导航栏视图，并使用更新的菜单参数值调用this.router.navigate(...)，反映菜单和路径中的导航更改需要根据所选菜单显示主要内容。