Как настроить маршруты в Angular2?

Question

У меня требование, как

заголовка, sidemenu, innerpages (профиль, примерно ..)

Хочу 3 отдельно маршрутов (1-заголовка, 2-sidemenu, 3-innerpages) , когда приложение нагрузки страница профиля, пришедшего первым

Я попытался как

app.rouutes.ts

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

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

вы смесительный концепцию маршрутов с раскладками, маршруты отражение URLs, если ввести/бизнес/заголовок, вы получите только BusinessHeaderComponent, это маршрутизация ... вам нужны детские маршруты, когда вы входите в бизнес/о, он должен загружать бизнес-заголовок, sidemenu и о компоненте

{ 
    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>, чтобы содержать дочерние компоненты.

Детскими компонентами может быть что угодно, как о странице с About content.

Конечно, вы можете использовать то же самое о компоненте в обоих маршрутах

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

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