Angular 2 layered menu routing

Question

I am trying to do multi-level menu routing.

Main Menu Component

@Component({ template: ` <h2>Main Menu</h2> <ul> <li><a [routerLink]="['/mainItem1']">Main Item 1</a></li> <li><a [routerLink]="['/mainItem2']">Main Item 2</a></li> more ....... </ul> <router-outlet></router-outlet> `, directives: [RouterOutlet], }) @Routes([ {path: '/mainItem1', component: MainItem1Component }, {path: '/mainItem2', component: MainItem2Component }, more ....... ]) export class MainMenuComponent { } 

One of the components of the submenu

 @Component({ template: ` <h2>Main Item 1</h2> <ul> <li><a [routerLink]="['main1sub1']">Main1 sub1 </a></li> <li><a [routerLink]="['main1sub2']">Main1 sub2 </a></li> many more ....... </ul> <router-outlet></router-outlet> <button type="button" (click)="goback()">Go back</button> `, directives: [RouterOutlet], }) @Routes([ {path: 'main1sub1', component: Main1Sub1Component }, {path: 'main1sub2', component: Main1Sub2Component }, many more ....... ]) export class MainItem1Component { } 

When the main menu component is displayed, and I click Main Item 1 , MainItem1Component displays it myself under MainMenuComponent .

I would expect when MainItem1Component displays MainMenuComponent should go away. If the user wants to return to the main menu, he can click the Go back button.

How can I achieve the desired behavior without defining all the routes at the top level?

Just to clarify: My question is at what level to define the @routes child element and place the <router-outlet> so that when the parent menu element is clicked, the child menu is displayed , while the parent menu should disappear .

I cannot define a child @routes without providing <router-outlet> at the same level. But then <router-outlet> at different levels is “conflict”, that is, they contain their own content and do not go away.

If I delete <router-outlet> at a deeper level, @routes defined at that level will not work.

Answer 1

I did something like that. I have a menu component that simply reads one parameter from a route to update its own view

For example, if the user goes to articles > hardware > monitors > lcd , I have the path http://mydomain/articles.hardware.monitors.lcd

The menu component subscribes to a route to receive notifications of route updates, as described in RouteParams in the AppComponent , and when a user clicks on a menu, the menu component moves to a path that reflects the current position of the menu.

In which menus only data is displayed. I have a tree (an array of arrays of arrays ... menu items) and use ngFor to create menu items in the view.

Answer 2

If you do not have many menus, you can simply move the menu to your own components. And then use these menu components in your existing components. Therefore, MainMenuMenuComponent goes to MainItem1Component and MainItem2Component, and MainItem1MenuComponent goes to Main1Sub1Component and Main1Sub2Component, etc.

If you have many menus, you can create a service containing your active links in the menu and make them in MainMenuComponent. Subcomponents can then call the service to set the current menu options in the init component.