[Angular深入浅出三十天] Day 28 - Angular小学堂（四之二）

昨天我们把落单的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>

设定完成！！

后再看看有没有恢复正常；如果没有，赶快留言告诉我你的问题吧！！