在前端开发中，我们往往需要使用占位符图片来填充项目中的空白图片区域，这个时候，就可以使用 Holder.js 这个工具。
在 Angular 2 项目中，可以使用 angular2-holderjs 这个 npm 包来集成 Holder.js，本文将详细介绍如何使用 angular2-holderjs。
安装
首先，需要在项目中引入 angular2-holderjs 包，通过以下命令进行安装：
npm install angular2-holderjs --save
引入模块
接下来，需要在需要使用 Holder.js 的模块中引入该模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - -------------- - ---- --------------------
-----------
-- ---
-------- -
-- ---
--------------
-
--
------ ----- ---------- - -使用 Holder.js
在 HTML 中使用 Holder.js 的语法格式如下：
<img src="holder.js/[width]x[height]/[background-color]/[text-color]?[theme]">
其中：
[width]和[height]表示图片的宽度和高度；[background-color]表示图片的背景颜色；[text-color]表示图片上的文字颜色；[theme]表示主题，可以使用industrial,sky,vine,lava,gray,ocial,sunrise,sea,pastel,candy这些主题。
通过 angular2-holderjs，我们可以使用组件来构建 Holder.js 图片，而且更容易读懂和维护。
-- -------------------- ---- -------
------------- ----------- ---- -- -------
------------- ---------------- ---- --------
---- ---------------- ---------------- -------------------- --------------------- ----------- --
---------------
------------ --------
---- ----------- ----- ------- ----- ---- -- --------------------------------
--------------
---------------在上述代码中，我们使用 ng-container 来循环遍历每个图片的数据，检查是否存在 src 属性，如果存在则表示该图片的数据可用，直接渲染。如果不存在，则表示该图片数据不可用，使用 Holder.js 来生成一个占位符作为替代。
其中 [holder] 属性表示使用 Holder.js 插件生成图片，size 指定图片大小为 100%，auto 表示根据图片大小自动调整。由于 Holder.js 是通过创建 div 元素的方式生成占位符图片，需要设置样式 item-image 来保证图片样式与其他图片一致。
示例代码
完整示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------- ----------- ---- -- -------
------------- ---------------- ---- --------
---- ---------------- ---------------- -------------------- --------------------- ----------- --
---------------
------------ --------
---- ----------- ----- ------- ----- ---- -- --------------------------------
--------------
---------------
--
------- --
----------- -
----------------- --------
------- --- ----- -----
-------- -----
-
--
--
------ ----- ------------ -
----- - -
- ---- ----------------------------------------------------------- ---- ------- ------ ----- ----- --
- ---- --- ---- ------ --- ----------- ------ ------ --- ---------- --
- ---- ---------------------------------------------------------- ---- ------ ------ ---- ----- -
--
-在该例子中，我们展示了三个图片，其中第一个和第三个图片可用，第二个图片不可用，使用 Holder.js 生成了一个占位符图片。
总之，angular2-holderjs 是使用 Holder.js 的好方法，它使得在 Angular 2 项目中使用 Holder.js 比原来更容易、更清爽。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554da81e8991b448d20e2