( 在項目目錄下使用命令行工具)
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路由模塊