基於 angular 實現的乙個 元件懶載入功能

我們常常會遇到這樣乙個問題，當我們使用乙個第三方控制項庫的時候，我們只用到了其中 1 個或某幾個元件，會連帶一大堆無用的東西，造成體積臃腫不堪。又或者首頁用到的元件較多，首頁載入速度緩慢，這個時候，我們或許需要載入使用者可視範圍內用到的元件，隨著使用者的瀏覽下拉，我們再去載入這些元件，漸進式載入,漸進式體驗，這個時候你或許就用到了本工具所實現的功能。或者乙個頁面的某些不重要區域，比如第三方廣告又或者不重要的元素，可以採用懶載入懶渲染，降低使用者首屏等待時間。一切都在使用者不知不覺中進行。大大增加使用者體驗，特別是中大型專案，優化必備！

從1.0.1開始，我們做了簡化處理，不必單獨配置，使用時設定路由名為選擇器即可！

yarn add iwe7-lazy-load

複製**

import  from

'iwe7-lazy-load';
// 用到的懶載入元件
let lazycomponentsmodule: lazycomponentsinte***ce = [
];@ngmodule()
export
複製**

lazy-test>
div>
複製**

import  from

'iwe7-lazy-load';
@viewchild('ele') ele: elementref;
constructor(public lazyloader: lazyloaderservice,
public view: viewcontainerref
) {}
ngoninit() 
複製**

import  from

'iwe7-lazy-load';
@component()
export
class lazytestcomponent {}
@ngmodule()
export
class lazytestmodule extends lazycomponentmodulebase 
}複製**

希望對大家有所幫助

新建乙個angular專案

新版本的angular是基於typscript的 不是js angualr的專案 基於typescript compiler webpack karma jasmine protracter 等模組。而自己動手搭建這些模組很麻煩，ng cli命令可以幫我們省去這一麻煩的環節。首先確保你的電腦上安裝了...

實現乙個基於Ajax的調查程式

global db poll db getrow select from tbl poll order by poll id desc limit 1 poll id poll poll id pollitems db getall select from tbl pollitem where po...

Python 基於Redis實現乙個簡單的分布式鎖

redis lock.py import redis import time import threading 連線池方式 pool redis.connectionpool host 127.0.0.1 port 6379 redis con redis.redis connection pool...