npm 包 angular2-holderjs 使用教程

阅读时长 5 分钟读完

在前端开发中,我们往往需要使用占位符图片来填充项目中的空白图片区域,这个时候,就可以使用 Holder.js 这个工具。

在 Angular 2 项目中,可以使用 angular2-holderjs 这个 npm 包来集成 Holder.js,本文将详细介绍如何使用 angular2-holderjs。

安装

首先,需要在项目中引入 angular2-holderjs 包,通过以下命令进行安装:

引入模块

接下来,需要在需要使用 Holder.js 的模块中引入该模块:

-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - -------------- - ---- --------------------

-----------
  -- ---
  -------- -
    -- ---
    --------------
  -
--
------ ----- ---------- - -

使用 Holder.js

在 HTML 中使用 Holder.js 的语法格式如下:

其中:

  • [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

纠错
反馈