使用路由延遲載入 Angular 模組

2021-09-07 15:10:16 字數 3222 閱讀 4094

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

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

我們使用 angular cli 來建立乙個演示專案：demo.

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

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

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

ng g module shop

ng g c home/home


ng g c shop/cart


ng g c shop/checkout 


ng g c shop/confirm
此時的 shop.module.ts 內容如下：

import  from


'@angular/core';


import 


from


'@angular/common';


import 


from


'./checkout/checkout.component';


import 


from


'./cart/cart.component';


import 


from


'./confirm/confirm.component';


@ngmodule()


export 


class shopmodule 



<


h1>lazy load module


h1>


<


a [routerlink]


="['/shop']"


>shop cart


a>


<


router-outlet


>


router-outlet


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

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

首先建立根路由。

import  from


'@angular/router';


//homecomponent this components will be eager loaded


import from


'./home/home.component';


export 


const routes: routes =[,,


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

需要注意的是一下幾點：

我們使用了 loadchildren 來延遲載入乙個模組。而不是使用提前載入所使用的 component。

我們使用了乙個字串而不是符號來避免提前載入。

我們不僅定義了模組的路徑，還提供了模組的類名。

import  from


'@angular/platform-browser';


import 


from


'@angular/core';


from''


;import 


from


'./home/home.component';


import 


from


'./main.routing';


import 


from


'@angular/router';


@ngmodule()


export 


定義模組路由


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


import from


'@angular/router'; 


import 


from


'./cart/cart.component'; 


import 


from


'./checkout/checkout.component'; 


import 


from


'./confirm/confirm.component


'; 


export 


const routes: routes =[ 


, 


, 


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

import  from


'@angular/core';


import 


from


'@angular/common';


import 


from


'./checkout/checkout.component';


import 


from


'./cart/cart.component';


import 


from


'./confirm/confirm.component';


import 


from


'./shop.routing'; 


import 


from


'@angular/router';


@ngmodule()


export 


class shopmodule
已經一切就緒了。

現在啟動應用。

ng serve
缺省會在 4200 埠啟動應用，請開啟瀏覽器，訪問：http://localhost:4200/

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

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

僅僅功能模組被載入了。

angular 路由學習 （九）非同步路由都預載入

預載入原理 預載入策略 使用者場景 將crisiscentermodule 改為預設懶載入，並使用全部預載入策略來載入所有懶載入模組 對crisis center 模組進行懶載入處理 crisis center routing.ts 該路徑為空路徑 const crisiscenterroutes ...

angular路由的使用案例

首先，新建乙個主頁面，作為我們的開始頁面，要引入下面兩個檔案，乙個是angularjs的，乙個是angular路由的檔案，之接拷過去就行。下面是主頁面的 簡單給了點樣式 下面三個js檔案是針對每乙個頁面中具體功能的，services.js filters.js 過濾器檔案 controllers.j...

Angular路由 子路由

在商品詳情頁面，除了顯示商品id資訊，還顯示了商品描述，和銷售員的資訊。通過子路由實現商品描述元件和銷售員資訊元件展示在商品詳情元件內部。ng g component productdesc ng g component sellerinfo 重點是修改銷售員資訊元件，顯示銷售員id。import ...