ngx-content-loader 是一个基于 Angular 的 npm 包，它可以帮助我们在页面加载数据时展示一个占位符，并在数据加载后自动替换为实际内容。
在前端开发中，我们经常需要处理前端数据加载的优化问题。有时候，数据加载过程中出现的空白区域会给用户带来不好的体验，此时就需要一个占位符来填充。
ngx-content-loader 可以提供一种优雅的方案，给用户展示占位符，并在数据加载完成后迅速替换为实际内容，以此来改善用户体验。
安装和使用
首先确保 Angular 版本在 2.0 以上。
接着，使用以下命令在项目中安装 ngx-content-loader:
npm install ngx-content-loader --save
运行后会在项目的 node_modules 中自动安装模块。
在需要使用占位符的组件中，引入 ngx-content-loader 模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ -- -- ------------------ ------ - ---------------------- - ---- --------------------- ----------- -------- --------------- ------------------------ ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
在 HTML 中使用 ngx-content-loader 组件，配置对应的参数即可展示占位符：
-- -------------------- ---- ------- ------------------- ------------- -------------- ----------- -------------------------- ---------------------------- ------------- ------------------------------ --------------------------- ---------------------
这个例子中，我们配置了占位符的宽度是 500px，高度是 100px，速度是 2。通过设置 primaryColor 和 secondaryColor，我们可以指定占位符的颜色。uniqueKey 是一个必须设置的参数，它用于确保 ngx-content-loader 的唯一性，可通过参数指定一个字符串。
API 文档
下面介绍 ngx-content-loader 的各个参数的含义和使用方法。
| 名称 | 数据类型 | 默认值 | 说明 |
|---|---|---|---|
| width | number/string | '100%' | 占位符宽度，可以是数字，也可以是字符串，默认是 100%，代表父元素的 100%。 |
| height | number/string | '100' | 占位符高度，可以是数字，也可以是字符串，默认是 100。 |
| speed | number | 2 | 占位符动画速度，越小越快。 |
| primaryColor | string | '#f3f3f3' | 占位符的主颜色。 |
| secondaryColor | string | '#ecebeb' | 占位符的次颜色。 |
| preserveAspectRatio | string | 'xMidYMid meet' | 设置如何保持纵横比，默认是 xMidYMid meet，即保持宽高比并尽可能填充目标元素。 |
| uniqueKey | string | '' | 设置一个用于确保 ngx-content-loader 的唯一性的字符串。 |
| rtl | boolean | false | 是否开启从右到左的展示。 |
| backgroundColor | string | 'transparent' | 占位符的背景颜色。 |
| backgroundOpacity | string | '1' | 占位符的背景透明度。 |
| ariaLabel | string | '' | 占位符的描述信息。 |
| ariaLabelledby | string | '' | 占位符的关联文本，通常用于无障碍阅读。 |
示例代码
下面是一个简单的示例，展示如何使用 ngx-content-loader 组件。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ----------- ---- -- --- -- --- ----- -- ----
-------------------
-------------
--------------
--------------------------
----------------------------
-----------
-------------------------------- ------
-------------------- - ---
---------------------
---- -------------------------------- ------------
---- ------------------------ ---------------------------
------
--
--
------ ----- ------------ -
--------------- -------- ------- -
-- --------
------ --- ----------------- ------- -- -
------------- -- -
-- ----- --- -- -
---------
- ---- -
----------
-
-- ------
-- -- ----
-
-在这个例子中，我们生成了三个占位符，它们的唯一性通过 uniqueKey 来保证。在异步请求数据的过程中，我们通过判断是否加载完成来决定显示占位符还是加载完成的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055caf81e8991b448da132