Angular2で経路を設定する方法は？

Question

Iは

ヘッダ、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 {} 

0のようにしようとした最初の

来ていますあなたが入力した場合

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だけを取得し、それはルーティングしています...あなたが必要とするものはchildルートです。ビジネス/ 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>タグが含まれています。

子コンポーネントは、コンテンツについてのAboutページのように、何でもかまいません。

もちろん、あなたがこれまでに試してみました何両方のルート

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

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