角2导航菜单

Question

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

​

​

正如您在上面的图片中所看到的，我创建了带有子元素的导航菜单。现在我想添加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

您要在<router-outlet></router-outlet>中添加HomeComponent？当您有子路由时，必须添加<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中，您必须将(子程序将被加载到)：

<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>

用这种方式进行了测试，结果成功了！