Question

我有菜单和辅助菜单组件。我想根据路由器插座标签中显示的组件更改二级菜单中的项目我的菜单导航有多个级别（经典树），但在二级菜单中我想只显示最后一级。

如何？我已经阅读了component-communication cookbook，我认为问题可以通过家长解决，孩子们可以通过服务进行沟通。

但我一直在问自己，这是否是解决这个问题的最佳方法？

const routes: Routes = [
    { path: "", component: HomePage },
    {
        path: "team-support", component: TeamSupportPage,       //secondary menu + router-outlet
        children: [
            { path: '', component: TeamSupportHomePage },
            { path: 'add', component: TeamSupportTaskAddPage },
            {
                path: 'project/:id',
                component: TeamSupportProjectPage,              //this component should change secondary menu for TeamSupportPage component
                children: [
                    { path: '', component: TeamSupportProjectDashboardPage },
                    { path: 'jobs', component: TeamSupportProjectJobsPage }
                ]
            },
        ]
    }
];

编辑： 我希望实现与在线商店相同的功能，您可以深入导航，但次要链接会发生变化：
当你在根页面时，链接是计算机，花园，工具，...
单击计算机时，链接将更改为：监视器，磁盘，...
单击监视器时，链接将更改为：led，oled，flat，...

更改是有条件的：如果较低页面没有链接，则使用旧链接。我可以手动将它们添加到每个页面，但我想避免将它们添加到每个页面。

Answer 1

请查看父母和孩子之间基于事件的沟通[1]。当孩子加载时，或者在孩子加载后不久，孩子将为菜单发出一个事件。事件本身将包含菜单项。家长会听取这个事件。触发后，父级将适当更新菜单。

该活动允许您沿功能线打破责任。父母负责一般呈现。负责创建自己数据逻辑链接的孩子。

1 - https://angular.io/guide/component-interaction#parent-listens-for-child-event

Angular2 - 来自路由器插座内的子组件的父组件中的更改菜单

1 个答案: