Angular惰性加載的特性模塊

一：Angular-CLI創建應用

cmd命令：ng new lazy-app --routing    (建立一個名叫 lazy-app 的應用，而 --routing 標識生成了一個名叫 app-routing.module.ts 的文件)

                 cd lazy-app     (進入lazy-app項目)   

二：建立一個帶路由的特性模塊

cmd命令：ng generate module customers --routing    (建立一個 customers 目錄，其中有兩個文件：CustomersModule 和 CustomersRoutingModule)

      備註：若是出現  Error: Cannot find module '@angular-devkit/core'，那就 npm install @angular-devkit/core

    ：向特性模塊添加組件

cmd命令：ng generate component customers/customer-list    (在 customers 目錄中建立一個名叫 customer-list 的文件夾，其中包含該組件的四個文件)

    ：再添加一個特性模塊

cmd命令：ng generate module orders --routing

                 ng generate component orders/order-list

三：創建UI

 app.component.html

1 <h1>
2   {{title}}
3 </h1>
4 
5 <button routerLink="/customers">Customers</button>
6 <button routerLink="/orders">Orders</button>
7 <button routerLink="">Home</button>
8 
9 <router-outlet></router-outlet>

四：配置路由                                                                                                                                                                                   

4.1：頂級路由：app-routing.module.ts    (惰性加載的語法：loadChildren 後面緊跟着一個字符串，它指向模塊路徑，而後是一個 #，而後是該模塊的類名)

 1 const routes: Routes = [
 2   {
 3     path: 'customers',
 4     loadChildren: 'app/customers/customers.module#CustomersModule'
 5   },
 6   {
 7     path: 'orders',
 8     loadChildren: 'app/orders/orders.module#OrdersModule'
 9   },
10   {
11     path: '',
12     redirectTo: '',
13     pathMatch: 'full'
14   }
15 ];

4.2：配置特性模塊的路由

customers-routing.module.ts：

 1 import { NgModule } from '@angular/core';
 2 import { Routes, RouterModule } from '@angular/router';
 3 
 4 import { CustomerListComponent } from './customer-list/customer-list.component';
 5 
 6 
 7 const routes: Routes = [
 8   {
 9     path: '',
10     component: CustomerListComponent
11   }
12 ];
13 
14 @NgModule({
15   imports: [RouterModule.forChild(routes)],
16   exports: [RouterModule]
17 })
18 export class CustomersRoutingModule { }

orders-routing.module.ts：

 1 import { NgModule } from '@angular/core';
 2 import { Routes, RouterModule } from '@angular/router';
 3 
 4 import { OrderListComponent } from './order-list/order-list.component';
 5 
 6 const routes: Routes = [
 7   {
 8     path: '',
 9     component: OrderListComponent
10   }
11 ];
12 
13 @NgModule({
14   imports: [RouterModule.forChild(routes)],
15   exports: [RouterModule]
16 })
17 export class OrdersRoutingModule { }

五：正常工做

cmd命令：ng serve --open

初始化後臺：

點擊【Customers】後臺

點擊【Orders】後臺

備註：forRoot() 包含的注入器配置是全局性的，好比對路由器的配置。forChild() 中沒有注入器配置，只有像 RouterOutlet 和 RouterLink 這樣的指令。