角度2のナビゲーションメニュー

Question

私のプロジェクトのナビゲーションメニューを作成しようとしています。 アイデアはこのメニューのルート配列を使用することであり、それが働いているが、今、私は私のメニューにURLを追加しようとしているとあなたが絵に見ることができるように、私が作成した上で、それは

が動作していません子要素を含むナビゲーションメニュー。 リンクを有効にするために[routerLink]を追加します。ルート項目について すべてが使用して正常に動作します：

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

が、それは動作しません子供の項目について。

P.S. ルート：あなたはHomeComponentで<router-outlet></router-outlet>を追加している

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>を追加する必要があります。あなたの問題はこれかもしれません。

---

私はここでテストしてこのように動作します。私は4つのコンポーネント（HomeComponent、Home1Component、Home2Component、Home3Component）を作成しました。 app.routingで

：app.moduleで

<router-outlet></router-outlet> 

を：あなたは（子供たちがにロードされます）配置する必要がありHome1Componentで

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

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> 

ここでこのようにテストされ、機能しました。