首頁 > 文章 > web前端 > 用路由延遲載入Angular模組方法

用路由延遲載入Angular模組方法

小云云原創: 2018-01-30 09:06:521465瀏覽

本文主要介紹使用路由延遲載入 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 { }

已經一切就緒了。

測試延遲載入

現在啟動應用程式。

ng serve

預設會在4200 連接埠啟動應用，請開啟瀏覽器，造訪：http://localhost:4200/

訪問首頁的網路訪問如下，其中並不包含功能模組的內容。

我們先將網路請求的歷史記錄清除掉。

然後點擊鏈接，訪問 /shop/cart 的時候，網路請求如下，可以看到一個新的腳本檔案被加載，這裡包含的就是延遲加載的功能模組。

只是功能模組被載入了。

用路由延遲載入Angular模組方法

相關文章