角度2路由多层菜单 [英] angular 2 routing multi-layer menus

问题描述

我正在尝试进行多级菜单路由.

I am trying to do multi-level menu routing.

主菜单组件

@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 { }

子菜单组件之一

@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 { }

当显示主菜单组件并且我单击Main Item 1时，MainItem1Component会在MainMenuComponent下方自行显示它.

When main menu component displays and I click on Main Item 1 the MainItem1Component displays it self below the MainMenuComponent.

我希望当MainItem1Component显示MainMenuComponent时应该消失.如果用户想返回主菜单，则可以按Go back按钮.

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?

仅需澄清一下: 我的问题是关于在哪个级别上定义子级@routes并放置<router-outlet>，以便在使用时单击父菜单项，子菜单将显示，而父菜单应消失.

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.

如果不提供相同级别的<router-outlet>，则无法定义子级@Routes.但是然后<router-outlet>在不同级别出现冲突"，这意味着它们拥有自己的内容并且不会消失.

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.

如果我在更深的层次上删除了<router-outlet>，则在该级别定义的@Routes将不起作用.

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

推荐答案

我做了类似的事情.我有一个菜单组件，它仅从路由中读取一个参数来更新其自己的视图

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

例如，如果用户导航到菜单articles > hardware > monitors > lcd，则我有路径http://mydomain/articles.hardware.monitors.lcd

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

菜单组件订阅路由以获取有关路由更新的通知，如 AppComponent中的RouteParams ，并且当用户单击菜单时，菜单组件会导航到反映当前菜单位置的路径.

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.

显示的菜单仅是数据驱动的.我有一棵树(菜单项的数组...数组的数组)，并使用ngFor在视图中生成菜单项.

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.

这篇关于角度2路由多层菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！