CODEWITHSUNDEEP
angularangular2-routing
Shawn
Shawn

Reputation: 5260

angular 2 routing multi-layer menus

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.

Upvotes: 1

Views: 3087

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657801

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.

Upvotes: 1

maloo
maloo

Reputation: 825

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.

Upvotes: 0

Related Questions