昨天我们把落单的UI元件跟其模块关联完之后，今天接着要来设定路由的部份！
开始设定路由前，可以先看看我们准备好的路径定义档
之所以会建立这个定义档是因为不希望Coding的时候要在代码里到处Hard Code，容易打错字又不好维护。既然是会重复用到的东西，我们就把它写成定义档，以后要维护或是要调整的时候也会比较好处理。
虽然这个项目应该是不会需要被维护，但好的习惯很重要！
复习一下我们所规划的路由：
Imgur
按照我们原本所规划的路由来设定的话，应该会长这样：
import { NgModule } from ‘@angular/core’；
import { Routes，RouterModule } from ‘@angular/router’；
// Constant
import { appPath } from ‘./app-path.const’；
const routes: Routes = [
{
path: appPath.home，
loadChildren: ‘./home/home.module#HomeModule’
}，
{
path: appPath.products，
loadChildren: ‘./product-section/product-section.module#ProductSectionModule’
}，
{
path: appPath.login，
loadChildren: ‘./login/login.module#LoginModule’
}，
{
path: appPath.cart，
loadChildren: ‘./cart/cart.module#CartModule’
}，
{
path: appPath.checkout，
loadChildren: ‘./checkout/checkout.module#CheckoutModule’
}，
{
path: appPath.success，
loadChildren: ‘./success/success.module#SuccessModule’
}，
{
path: ‘**’，
redirectTo: appPath.home，
pathMatch: ‘full’
}
]；
@NgModule（{
imports: [RouterModule.forRoot（routes，{
preloadingStrategy: PreloadAllModules
}）]，
exports: [RouterModule]
}）
export class AppRoutingModule { }
用路径定义档来设定路由是不是清爽多啦？！未来就算路径要变动，也只要修改定义档里的定义就好，不需要到处去寻找还有哪个地方没有改到(pattayasixes)。
记得加上预先加载的设定，避免档案变大之后，初次分页时会有顿顿的感觉
另外我们这次使用预设的PathLocationStrategy路由策略，注意网址后面不要有#噢！
然后我们再到各模块里处理自己的路由：
HomeRoutingModule ：
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { HomeComponent } from ‘./home.component’;
const routes: Routes = [
{
path: ”,
component: HomeComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }
ProductSectionRoutingModule ：
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { ProductSectionComponent } from ‘./product-section.component’;
import { ProductListComponent } from ‘./product-list/product-list.component’;
const routes: Routes = [
{
path: ”,
component: ProductSectionComponent,
children: [
{
path: ‘:type’,
component: ProductListComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ProductSectionRoutingModule { }
LoginRoutingModule ：
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { LoginComponent } from ‘./login.component’;
const routes: Routes = [
{
path: ”,
component: LoginComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LoginRoutingModule { }
CartRoutingModule ：
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { CartComponent } from ‘./cart.component’;
const routes: Routes = [
{
path: ”,
component: CartComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CartRoutingModule { }
SuccessRoutingModule ：
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { SuccessComponent } from ‘./success.component’;
const routes: Routes = [
{
path: ”,
component: SuccessComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SuccessRoutingModule { }
最後是稍微比較複雜一點點的 CheckoutRoutingModule ：
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
// Constant
import { appPath } from ‘../app-path.const’;
// Component
import { CheckoutComponent } from ‘./checkout.component’;
import { CustomerInfoComponent } from ‘./customer-info/customer-info.component’;
import { PaymentInfoComponent } from ‘./payment-info/payment-info.component’;
import { ReceiptInfoComponent } from ‘./receipt-info/receipt-info.component’;
const routes: Routes = [
{
path: ”,
component: CheckoutComponent,
children: [
{
path: ”,
redirectTo: appPath.checkoutFlow.customerInfo,
pathMatch: ‘full’
},
{
path: appPath.checkoutFlow.customerInfo,
component: CustomerInfoComponent
},
{
path: appPath.checkoutFlow.paymentInfo,
component: PaymentInfoComponent
},
{
path: appPath.checkoutFlow.receiptInfo,
component: ReceiptInfoComponent
},
{
path: ‘**’,
redirectTo: appPath.checkoutFlow.customerInfo,
pathMatch: ‘full’
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CheckoutRoutingModule { }
如此一来我们应该已经大致上将所有路由都设定完了，赶快来验证一下我们设的路由有没有问题。
首先我们先打开app.component.ts档，将里面的代码改成这样(esk-Life)：
import { Component } from ‘@angular/core’；
// Constant
import { appPath } from ‘./app-path.const’；
@Component（{
selector: ‘app-root’，
templateUrl: ‘./app.component.html’，
styleUrls: [‘./app.component.css’]
}）
export class AppComponent {
/**
*给Template用的路由定义
*
* @memberof AppComponent
*/
path = appPath；
}
然后再将app.component.html里的Template改成这样：
<ul>
<li><a [routerLink]=“path.home”>Home</a></li>
<li><a [routerLink]=“path.login”>Login</a></li>
<li><a [routerLink]=“[path.products，’all’]”>Products</a></li>
<li><a [routerLink]=“path.cart”>Cart</a></li>
<li><a [routerLink]=“path.checkout”>Checkout</a></li>
<li><a [routerLink]=“path.success”>Success</a></li>
</ul>
<router-outlet></router-outlet>
最后再到product-section.component.html跟checkout.component.html里加入路由插座<router-outlet></router-outlet>：
<p>
product-section works！
</p>
<router-outlet></router-outlet>
<p>
checkout works！
</p>
<router-outlet></router-outlet>
设定完成！！
后再看看有没有恢复正常；如果没有，赶快留言告诉我你的问题吧！！
