Angular 2 navigation menu

Question

I'm trying to create navigation menu for my project. The idea is to use Routes array for this menu and it is working but now I'm trying to add urls to my menu and it is not working

As you can see on picture above I created navigation menu with children elements. Now I want to add [routerLink] to enable links. For root items all works fine using:

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

but for children items it doesn't work.

P.S. Routes:

    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

You are adding <router-outlet></router-outlet> in HomeComponent? when you have a child route you must add <router-outlet></router-outlet>. Your problem may be this.

---

I tested here and work this way. I created 4 component (HomeComponent, Home1Component, Home2Component and Home3Component).

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

in Home1Component you have to put (the children will be loaded into ):

<router-outlet></router-outlet>

in 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 ],
  ...
})

to create routes:

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

tested here this way and worked!