angular4 模塊懶加載

( 在項目目錄下使用命令行工具)

1.ng g module confirm-order --routing

2.ng g component confirm-order  

(注意順序,先創建module,然後增加組件時angular-cli會自動將component導入到module中)

3.配置路由confirm-order-routing.module.ts

const routes: Routes = [

{

path:  '',

component: ConfirmOrderComponent,

data: { title: '確認訂單' }

}

];

4.配置路由app-routing.module.ts

const routes: Routes = [

{

path: '',

redirectTo: 'home',

pathMatch: 'full'

},

{

path: 'home',

loadChildren: './home/home.module#HomeModule'

},

{

path: 'confirm-order',

loadChildren: './confirm-order/confirm-order.module#ConfirmOrderModule'

}

];


最後附上部分截圖:

   

圖1. 項目結構


圖2. ConfirmOrderModule模塊


圖3. ConfirmOrderRoutingModule路由模塊


圖4. AppRoutingModule路由模塊



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章