각도 2 탐색 메뉴

Question

내 프로젝트의 탐색 메뉴를 만들려고합니다. 아이디어는이 메뉴에 대한 경로 배열을 사용하는 것입니다 그리고 그것은 작동하지만 지금은 내 메뉴에 URL을 추가하기 위해 노력하고있어 당신이 그림에서 볼 수 있듯이 내가 만든 위는

작동하지 않습니다 children 요소가있는 탐색 메뉴. 링크를 활성화하려면 [routerLink]를 추가하고 싶습니다.

이

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

하지만 어린이 항목이 작동하지 않습니다 루트 항목의 모든 사용하여 작동합니다.

P. 경로 : 당신은 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에서

:

당신이 (아이들이에로드됩니다) 넣어야 할 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" } } 
     ] 
     } 
    ]); 

:

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

여기에서 테스트하면 효과적입니다.