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

2022-09-13 13:00:12 字數 2475 閱讀 3490

預載入原理：

預載入策略：

使用者場景：將crisiscentermodule 改為預設懶載入，並使用全部預載入策略來載入所有懶載入模組

對crisis-center 模組進行懶載入處理

//


crisis-center-routing.ts 該路徑為空路徑


const crisiscenterroutes: routes =[


},]}


]}];


//  ,


,   // 自定義預載入


},,  


];//


import  from './heroes/heroes.module';


//import  from './crisis-center/crisis-center.module';


//import  from './admin/admin.module';


import  from './auth/auth.module';


import  from '@angular/platform-browser/animations'; //


匯入動畫模組


import  from './page-not-found/page-not-found.component';


import  from './compose-message/compose-message.component';


@ngmodule( from '@angular/core';


import  from 


'@angular/router'


;import  from './compose-message/compose-message.component';


import  from './page-not-found/page-not-found.component';


import  from './auth/auth.guard';


,  ,


},,  


];@ngmodule()],


exports: [


routermodule


]})
關於自定義預載入；這裡自定義策略為：只預載入data.preload 為 true  的路由；

生成自定義服務

ng generate service selective-preloading-strategy


import  from '@angular/core';


import  from '@angular/router';


import  from 'rxjs';


@injectable()


export class selectivepreloadingstrategyservice implements preloadingstrategy  


else


}}
自定義預載入處理

//


import  from '@angular/core';


import  from '@angular/router';


import  from './compose-message/compose-message.component';


import  from './page-not-found/page-not-found.component';


import  from './auth/auth.guard';


import  from 


'./selective-preloading-strategy.service'


;  ,


,  },


,  ];@ngmodule()],


exports: [


routermodule


]})
編輯admindashboardcomponent 來顯示預載入路由日誌， 當載入完初始路由後，crisiscentermodule被預載入，通過該模組可以在控制台看到日誌

Angular4 路由復用，路由快取

angular中維持下拉框選中狀態，input輸入狀態等等 angular專案中如何實現路由快取 相信很多朋友和筆者一樣，都對vue中的keep alive設計拍案叫絕。如此乙個簡單的問題在angular專案中實現起來確非易事。筆者給出一種解決方法，希望對要在angular專案中實現類似vue的ke...

angular6 路由配置

一.簡述 方便我們可以url方式和鏈結的方式使用該元件，不僅僅通過元件選擇器使用它。二.配置路由 第一步 建立路由檔案 routing flat module 第二步 修改路由檔案 第三步 建立乙個登入元件 ng generate component login第四步 路由檔案中配置登入元件 注意 ...

Angular6 路由概述

路由的說明 路由是實現spa的基礎設施 作用 讓使用者從乙個檢視導航到另乙個檢視 路由是 url和元件的對應規則 使用 html5風格 history.pushstate 的導航 支援 重定向 路由高亮 萬用字元路由 路由引數 支援 子路由 路由模組 路由守衛 非同步路由等 路由的配置 再index...