Angular 2个导航菜单

Question

我正在尝试为我的项目创建导航菜单。我的想法是为这个菜单使用 Routes 数组，它正在工作，但现在我正在尝试将 url 添加到我的菜单，但它不工作

如上图所示，我创建了带有子元素的导航菜单。现在我想添加 [routerLink] 以启用链接。对于根项目，使用：

一切正常

[routerLink]="[menuItem.route.path]"

但对于儿童项目它不起作用。

P.S。路线：

    RouterModule.forRoot([
  { path: '', component: HomeComponent },
  { path: 'admin', component: HomeComponent, data: { title: "Home", icon: "home" } },
  {
    path: 'test', component: HomeComponent, data: { title: "Settings", icon: "settings" },
    children: [
      { path: '', component: HomeComponent, data: { title: "Test", icon: "power_settings_new" } },
      { path: 'settings', component: HomeComponent, data: { title: "Test2", icon: "power_settings_new" } }
    ]
  }
])

Answer 1

您要在 HomeComponent 中添加 <router-outlet></router-outlet>？当您有 child 路线时，您必须添加 <router-outlet></router-outlet>。你的问题可能是这样的。

我在这里测试并以这种方式工作。我创建了 4 个组件（HomeComponent、Home1Component、Home2Component 和 Home3Component）。

在app.routing中：

import {HomeComponent}            from './admin/home/home.component'
import {Home1Component}            from './admin/home1/home1.component'
import {Home2Component}            from './admin/home2/home2.component'
import {Home3Component}            from './admin/home3/home3.component'

 export const routing: ModuleWithProviders = RouterModule.forRoot([
      { path: '', component: HomeComponent },
      { path: 'admin', component: Home3Component, data: { title: "Home", icon: "home" } },
      {
        path: 'test', component: Home1Component, data: { title: "Settings", icon: "settings" },
        children: [
          { path: '', component: Home2Component, data: { title: "Test", icon: "power_settings_new" } },
          { path: 'settings', component: Home3Component, data: { title: "Test2", icon: "power_settings_new" } }
        ]
      }
    ]);

在 Home1Component 中你必须放置（children 将被加载到）：

<router-outlet></router-outlet>

在app.module中：

import { AppComponent }               from './app.component';
import { HomeComponent }              from './admin/home/home.component';
import { Home1Component }             from './admin/home1/home1.component';
import { Home2Component }             from './admin/home2/home2.component';
import { Home3Component }             from './admin/home3/home3.component';

@NgModule({
  ...
  declarations: [ AppComponent, HomeComponent, Home1Component, Home2Component, Home3Component ],
  ...
})

创建路线：

<li><a routerLink="/admin">Admin</a></li>
<li><a routerLink="/test">test</a></li>
<li><a routerLink="/test/settings">teste/settings</a></li>

以这种方式在这里测试并且有效！

Angular 2个导航菜单

Angular 2 navigation menu

angular

angular2-routing

angular2-router