2017-01-11 85 views
-2

予有需要像enter image description here如何在Angular2中配置路由?

頭,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 { } 

請幫我配置它

+2

你嘗試過這麼遠嗎?我還建議閱讀有關這方面的角度2文檔,然後嘗試實現並提出問題,如果你卡住了。 https://angular.io/docs/ts/latest/guide/router.html –

+2

請把你的代碼與你嘗試過的東西。 – acostela

+1

我看不出爲什麼你會有一個路徑頭和你的側面菜單的路線。您將路線與頁面的各個部分混淆在一起。 –

回答

1

你混合佈局路線的概念,是航線URL的反映,如果輸入/業務/你將得到BusinessHeaderComponent單獨的,這是路由......你需要的是子路由,當你輸入business/about,它應該加載業務頭,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>標籤來包含子組件。

子組件可以是任何東西,例如關於具有關於內容的關於頁面。

當然你也可以使用有關組件相同的兩個路由中

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

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

可以寫組件:CoreComponents.BusinessComponent,Plese提供一些例子 –

+0

刪除了CoreComponents,對不起,這是我的方式,但它不是必需的 – Ayyash

+0

好的。有一件事我不明白,你說** BusinessLayoutComponent和UserLayoutComponent模板,添加你的標題和側欄作爲純html,不需要爲那個組件**如果像在每個模塊中我應該寫頭文件,sidemenu –