Angular2 - Change menu in parent Component from child inside router-outlet

Question

I have menu and secondary menu component. I would like to change items in secondary menu based on component I displayed in router-outlet tag.
My menu navigation has multiple levels (classic tree), but in secondary menu I want to display only last level.

How? I already read component-communication cookbook and I think problem could be solved with Parent and children communicate via service.

But I keep asking myself, if this is the best approach for this problem?

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

Edited: I want to achieve same functionality that online shops have, where you can navigate in depths, but secondary links changes:
When you are on root page, links are computer, garden, tools, ...
When you click computers, links changes to: monitors, disks, ...
When you click monitors, links changes to: led, oled, flat, ...

Change is conditional: if lower page does not have links, old are used. I could manually add them to every page, but I want to avoid adding them to every page.

When TeamSupportProjectDashboardPage is loaded I would like to change menu (template) defined in TeamSupportPage. — Makla

Virmundi Virmundi · Accepted Answer · 2017-08-21T16:22:48

Please look at the event based communication between the parent and child [1]. When the child loads, or some time soon after that, the child will emit an event for the menu. The event itself will contain the menu items. The parent will listen to the event. When triggered, the parent will update the menu appropriately.

The event allows you to break the responsibilities along functional lines. The parent is responsible for general rendering. The child it responsible for creating the logical links to its own data.

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

Angular2 - Change menu in parent Component from child inside router-outlet

1 Answers