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应该消失。如果用户想要返回主菜单，他/她可以点击Go back按钮。

如果不在顶级定义所有路线，我如何实现所需的行为？

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

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

如果我在更深层次删除<router-outlet>，那么在该级别定义的@Routes将无法正常工作。

Answer 1

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

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

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

显示的菜单仅限数据驱动。我有一个树（菜单项的数组数组）和使用ngFor生成视图中的菜单项。

Answer 2

如果您没有很多菜单，只需将菜单移动到自己的组件中即可。然后在现有组件中使用这些菜单组件。因此MainMenuMenuComponent进入MainItem1Component和MainItem2Component，MainItem1MenuComponent进入Main1Sub1Component和Main1Sub2Component，依此类推。

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

angular 2路由多层菜单

2 个答案: