angular 2 routing multi-layer menus

Question

I am trying to do multi-level menu routing.

The 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 sub menu component

@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 main menu component displays and I click on Main Item 1 the MainItem1Component displays it self below the MainMenuComponent.

I would expect when MainItem1Component displays the MainMenuComponent should go away. If the user want to go back to main menu, he/she can hit the Go back button.

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

Just to clarify: My question is about at which level to define the child @routes and put <router-outlet> so that when the use click on a parent menu item the child menu will show up while the parent menu should disappear.

I cannot define child @Routes without providing <router-outlet> at the same level. But then <router-outlet> at different level "conflicts", meaning they holds their own content and wouldn't go away.

If I remove the <router-outlet> at deeper level, @Routes defined at that level won't work.

score 1 · Accepted Answer · edited May 23 '17 at 12:25

1

I did something similar. I have menu component that just reads one parameter from the route to update its own view

For example if the user navigates to the menu articles > hardware > monitors > lcd I have a path http://mydomain/articles.hardware.monitors.lcd

The menu component subscribes to route to get notified about route updates like explained in RouteParams in AppComponent and when a user clicks a menu the menu component navigates to the path that reflects the current menu position.

Which menus are shown is only data driven. I have a tree (array of arrays of arrays ... of menu items) and use ngFor to generate the menu items in the view.

edited May 23 '17 at 12:25

Community

1
1

answered May 15 '16 at 15:46

Günter Zöchbauer

623,577
216
2,003
1,567

Do you mean to use one single component+service to handle all different menus for all different level? – Shawn May 16 '16 at 15:40
1

Exactly. I just update the data that `ngFor’ is using to render the menu items. – Günter Zöchbauer May 16 '16 at 18:55
Do you still need to define @Routes for all menus? If yes, then all routes will be defined inside this single component? – Shawn May 16 '16 at 22:33

score 0 · Answer 2 · answered May 15 '16 at 10:16

0

If you don't have many menus you could just move the menus into their own components. And then use those menu components in your existing components. So MainMenuMenuComponent goes into MainItem1Component and MainItem2Component, and MainItem1MenuComponent goes into Main1Sub1Component and Main1Sub2Component, and so on.

If you have many menus, you could create a service that holds your active menu links and render these in the MainMenuComponent. Sub components could then call the service to set the current menu options on component init.

answered May 15 '16 at 10:16

maloo

685
1
6
16

By "goes into", do you mean flatten the menu layers into one big menu?. I do have many many menus though. – Shawn May 15 '16 at 13:19
1

I mean take out the
... part and put into a separate component. It basically allows you to reuse that part in multiple components w/o having to do copy'n'paste. But it sounds like a generic menu component + service combo is the way to go if you have that many.If all data you need to create the menu is in the @Routes(). You might be able to have to component listen to router.change event and render menu w/o components having to specify the items.
– maloo May 15 '16 at 16:49

angular 2 routing multi-layer menus

2 Answers2

Linked