使用路由延遲載入Angular模組實例詳解-js教程-PHP中文網

使用路由延遲載入Angular模組實例詳解

小云云

發布： 2018-01-24 15:54:24

原創

1274 人瀏覽過

本文主要介紹了詳解使用路由延遲載入 Angular 模組,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

Angular 非常模組化，模組化的一個非常有用的特性就是模組作為延遲載入點。延遲載入意味著可以在背景載入一個模組和其包含的所有元件等資源。這樣 Angular 就不需要在第一個介面從伺服器下載所有的文件，直到您要求它，才下載對應的模組。這對提供效能和減少首屏的初始下載檔案尺寸有巨大的幫助。而且它可以很容易設定。

這裡將使用一個簡單範例來示範這個特性是如何運作的。將應用程式拆分為多個不同的模組，可以在需要的時候再進行延遲載入。

延遲載入的路由需要在根模組之外定義，所以，你需要將需要延遲載入的功能包含在功能模組中。

我們使用 Angular CLI 來建立一個示範專案：Demo.

ng new demo

登入後複製

然後，進入到 demo 資料夾中。安裝必要的 package。

npm i

登入後複製

在安裝之後，我們建立一個新的模組 shop。在 angular CLI 中，ng 是指令提示指令，g 表示 generate，用來建立某一類新 item。

建立新的名為shop 的模組是：

ng g module shop

登入後複製

這會導致在Angular 專案的src/app 檔案下建立一個新的資料夾，並新增一個名為shop.module.ts 的模組定義檔。

然後，我們在預設的 app 模組和新建立的 shop 模組中分別建立元件。

ng g c home/home
ng g c shop/cart
ng g c shop/checkout 
ng g c shop/confirm

登入後複製

CLI 會將home 指派到app 模組中，將cart、checkout、confirm 指派到shop 模組中，例如，

#此時的shop .module.ts 內容如下：

import { NgModule } from &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;
import { CheckoutComponent } from &#39;./checkout/checkout.component&#39;;
import { CartComponent } from &#39;./cart/cart.component&#39;;
import { ConfirmComponent } from &#39;./confirm/confirm.component&#39;;

@NgModule({
 imports: [
  CommonModule
 ],
 declarations: [CheckoutComponent, CartComponent, ConfirmComponent]
})
export class ShopModule { }

登入後複製

修改根元件

Angular CLI 預設產生的app.component.ts 元件是應用程式的主頁面，其中包含了一些關於Angular 的介紹信息，我們將它修改成我們需要的內容。將預設產生的 app.component.html 內容修改為以下內容。

<!--The content below is only a placeholder and can be replaced.-->
<h1>Lazy Load Module</h1>
<a [routerLink]="[&#39;/shop&#39;]" >Shop Cart</a>
<router-outlet>
</router-outlet>

登入後複製

這裡提供了一個佔位的 router-outlet，各個元件將顯示在這裡面。

同時，提供了一個導航鏈接，可以直接導航到 /shop/cart 元件。

建立路由

根路由

#先建立根路由。

我們在 app 資料夾中，新增一個名為 main.routing.ts 的路由設定檔。內容如下：

import { Routes } from &#39;@angular/router&#39;;
// HomeComponent this components will be eager loaded
import { HomeComponent } from &#39;./home/home.component&#39;;

export const routes: Routes = [
  { path: &#39;&#39;, component: HomeComponent, pathMatch: &#39;full&#39; },
  { path: &#39;shop&#39;, loadChildren: &#39;./shop/shop.module#ShopModule&#39; },
  { path: &#39;**&#39;, component: HomeComponent }
];

登入後複製

其中，home 元件是正常的提前載入。

要注意的是一下幾點：

1. 我們使用了 loadChildren 來延遲載入一個模組。而不是使用提前加載所使用的 component。
2. 我們使用了一個字串而不是符號來避免提前載入。
3. 我們不僅定義了模組的路徑，也提供了模組的類別名稱。

在 app.module.ts 中啟用根路由。主要需要使用 forRoot 來啟用根路由。

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;

import { AppComponent } from &#39;./app.component&#39;;
import { HomeComponent } from &#39;./home/home.component&#39;;
import { routes } from &#39;./main.routing&#39;;
import { RouterModule } from &#39;@angular/router&#39;;

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes)
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

登入後複製

模組路由

#定義模組路由

#對於shop 模組來說，定義路由就沒有什麼特別了，我們這裡可以定義一個名為shop.route.ts 的路由定義文件，內容如下所示：

import { Routes } from &#39;@angular/router&#39;; 
import { CartComponent } from &#39;./cart/cart.component&#39;; 
import { CheckoutComponent } from &#39;./checkout/checkout.component&#39;; 
import { ConfirmComponent } from &#39;./confirm/confirm.component&#39;; 
export const routes: Routes = [   
     { path: &#39;&#39;, component: CartComponent },   
     { path: &#39;checkout&#39;, component: CheckoutComponent },  
     { path: &#39;confirm&#39;, component: ConfirmComponent } 
];

登入後複製

還需要修改一下模組定義檔shop. module.ts 文件，以使用這個路由定義。注意我們需要使用 forChild 來啟用子路由。

import { NgModule } from &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;
import { CheckoutComponent } from &#39;./checkout/checkout.component&#39;;
import { CartComponent } from &#39;./cart/cart.component&#39;;
import { ConfirmComponent } from &#39;./confirm/confirm.component&#39;;

import { routes } from &#39;./shop.routing&#39;; 
import { RouterModule } from &#39;@angular/router&#39;;

@NgModule({
 imports: [
  CommonModule,
  RouterModule.forChild(routes)
 ],
 declarations: [CheckoutComponent, CartComponent, ConfirmComponent]
})
export class ShopModule { }

登入後複製

已經一切就緒了。

測試延遲載入

現在啟動應用程式。