angular 2 路由多层菜单

Question

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

主菜单组件

@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 下方。

我希望当 MainItem1Component 显示时 MainMenuComponent 应该消失。如果用户想返回主菜单，he/she 可以点击 Go back 按钮。

如何在不在顶层定义所有路由的情况下实现所需的行为？

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

如果不在同一级别提供 <router-outlet>，我无法定义子 @Routes。但是 <router-outlet> 在不同的级别 "conflicts"，这意味着他们拥有自己的内容并且不会消失。

如果我删除更深层次的 <router-outlet>，在该层次定义的 @Routes 将不起作用。

Answer 1

如果您的菜单不多，您可以将菜单移到它们自己的组件中。然后在现有组件中使用这些菜单组件。所以 MainMenuMenuComponent 进入 MainItem1Component 和 MainItem2Component，MainItem1MenuComponent 进入 Main1Sub1Component 和 Main1Sub2Component，依此类推。

如果您有很多菜单，您可以创建一个服务来保存您的活动菜单链接并在 MainMenuComponent 中呈现这些链接。然后，子组件可以调用该服务来设置组件 init 上的当前菜单选项。

Answer 2

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

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

菜单组件订阅路由以获得有关路由更新的通知，如 RouteParams in AppComponent 中所述，当用户单击菜单时，菜单组件导航到反映当前菜单位置的路径。

显示哪些菜单仅由数据驱动。我有一棵树（数组数组的数组......菜单项的数组）并使用 ngFor 在视图中生成菜单项。

angular 2 路由多层菜单

angular 2 routing multi-layer menus

angular2-routing

angular