今天在工作上遇到一個問題,我有一個功能執行時會切換兩個 Angular Component 的顯示,當切換到其中一個 Component 時,我會去抓取當下它的 offsetWidth 做運算使用,但抓這個 offsetWidth 卻憑空少了15px
,後來在找了一段時間終於找到原因,在這邊以一個簡化過的例子紀錄一下。
今天在工作上遇到一個問題,我有一個功能執行時會切換兩個 Angular Component 的顯示,當切換到其中一個 Component 時,我會去抓取當下它的 offsetWidth 做運算使用,但抓這個 offsetWidth 卻憑空少了15px
,後來在找了一段時間終於找到原因,在這邊以一個簡化過的例子紀錄一下。
在 Angular 應用程式一載入時,預設會將所有的 Module 一次全部載入,但如果今天應用程式規模很大,或是某些 Module 中需要載入的東西過多,就會拖到整個應用程式的載入時間。
為了解決這個問題,Angular 有針對 Module 提供 Lazy Loading 的功能,簡單來說就是當需要此 Module 的時候再進行載入,如此就不會影響到整個應用程式的效能。
Angular 本身的設計概念就是使用模組化的機制,Module (模組) 是組成 Angular 應用程式的基本單位,每個 Angular 專案最開始都會有一個模組當作程式進入點,稱為根模組(Root Module) 。透過 Angular CLI 創建的專案會將此根模組命名為AppModule
,並放在app.module.ts
檔案中。
也可以將有相同特性的功能拆出來,組合成不同的模組,各個模組間依程式架構相互引用,組合成 Angular 應用程式。模組中可以透過設定的方式,定義此模組中包含的 components、directives、pipes 等,以及其他與模組相關的屬性,以下我們就來研究一下 Angular Module 的使用方式以及使用情境。
Update your browser to view this website correctly. Update my browser now