0

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

在此处输入图像描述

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

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

但对于儿童物品，它不起作用。

PS路线：

    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" } }
    ]
  }
])
4

1 回答 1

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>

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

于 2016-10-25T10:55:35.223 回答