Angular2에서 경로를 구성하는 방법은 무엇입니까?

Question

I는 I 3 개 별도 경로를 원하는

헤더 sidemenu, innerpages 같은 (약 프로필, ..)

(1 헤더 2- sidemenu 3- innerpages)는 애플리케이션 로딩 요구 될 때 가질 프로필 페이지 내가

같은 시도

먼저 와야

const appRoutes: Routes = [ 
    { 
    path: '', redirectTo: '/business', pathMatch: 'full' 
    } 
]; 
@NgModule({ 
    imports: [ 
    RouterModule.forRoot(appRoutes) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class AppRoutingModule {} 

0 app.rouutes.ts한다 입력하면

business.routes.ts

const BUSINESS_ROUTES: Routes = [ 
    { path: 'header', component: BusinessHeaderComponent }, 
    { path: 'sidemenu', component: BusinessSidemeuComponent }, 

    { path: 'about', component: BusinessComponent } 

    ]; 

@NgModule({ 
imports: [ 
    RouterModule.forChild(BUSINESS_ROUTES) 
], 
exports: [ 
    RouterModule 
] 
}) 
export class BusinessRoutingModule { } 

내가 그것을 당신이 레이아웃과 경로의 개념을 혼합하고

Answer 1

를 구성하는 데 도와주세요, 경로는 URL을 반영하다/사업/머리글 만 BusinessHeaderComponent를 가져올 것입니다. 라우팅이 필요합니다. 하위 경로가 필요합니다. 비즈니스/about을 입력하면 비즈니스 헤더, 사이드 메뉴 및 구성 요소가로드되어야합니다.

{ 
    path: '', redirectTo: '/business', pathMatch: 'full' 
}, 
{ 
    path: 'business', 
    component: BusinessLayoutComponent, 
    children: [ 
     { 
     path: 'about', 
     component: AboutComponent, 
     }, 
    ] 
    }, 
{ 
    path: 'user', 
    component: UserLayoutComponent, 
    children: [ 
     { 
     path: 'about', 
     component: AboutComponent, 
     }, 
    ] 
    }, 

BusinessLayoutComponent 및 UserLayoutComponent 템플릿 내부 이제

, 즉 그들이

정의 될 수있는 유일한 장소이기 때문에, 헤더 및 사이드 바 등 순수 HTML, 그것을위한 구성 요소에 대한 필요를 추가 레이아웃 구성 요소는 헤더와 매우 간단한 HTML 페이지입니다 하위 구성 요소를 포함하는 단일 <router-outlet></router-outlet> 태그가 있습니다.

하위 구성 요소는 내용 정보가있는 약 페이지와 같이 아무 것도 될 수 없습니다.

물론 당신은 당신이 지금까지 시도 무엇 모두 루트

import { Component} from '@angular/core'; 

@Component({ 
    templateUrl: 'common/about.html' 
}) 
export class AboutComponent { 
    constructor() { } 
}