npm 包 ngx-spinner 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 ngx-spinner 使用教程

最近在开发一个前端项目时，需要显示加载中的动画效果，经过一番查找，发现了一个非常好用的 npm 包：ngx-spinner。ngx-spinner 是一个基于 Angular 的轻量级 spinner 组件，简单易用，支持多种动画效果。本篇文章将介绍如何使用 ngx-spinner，让你在前端开发中事半功倍。

安装 ngx-spinner

安装 ngx-spinner 很简单，只需要在命令行中输入：

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

这个命令中，--save 参数表示把 ngx-spinner 添加至项目依赖中。接下来，在你的模块文件中导入 ngx-spinner：

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

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

使用 ngx-spinner

在导入 ngx-spinner 后，就可以在代码中使用了。ngx-spinner 有两种使用方式，一种是通过调用 show() 和 hide() 方法来手动控制 spinner 的显示和隐藏，另一种是通过装饰器 @ngxSpinner 来自动控制。

手动控制

手动控制 spinner 首先要在模板中添加 ngx-spinner 组件：

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

在代码中，调用 show() 方法展示 spinner：

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

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

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

这个例子中，在组件内的 ngOnInit 生命周期钩子函数中，首先调用 show() 方法显示 spinner，接着使用 setTimeout 函数模拟 3 秒钟的加载过程，最后调用 hide() 方法隐藏 spinner。

自动控制

ngx-spinner 的自动控制则需要使用 @ngxSpinner 装饰器。以组件中的函数为例，只需要在函数前添加 @ngxSpinner('spinner') 声明变量：

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

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

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

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

这个例子中，定义了一个按钮，点击这个按钮会触发 onInit() 函数。在函数中，只需要像平常那样写你的业务逻辑即可，装饰器 @ngxSpinner('spinner') 会自动控制 spinner 的显示和隐藏。

spinner 配置

通过在 ngx-spinner 组件中添加属性，可以使 spinner 拥有不同的外观和动画效果。ngx-spinner 的完整属性列表如下：

name - spinner 的名称
bdColor - 边框颜色
size - 大小，支持 small、medium 和 large
color - 颜色
type - 动画类型，支持多种类型，比如 ball-clip-rotate-multiple、cube-grid 等

总结

ngx-spinner 是一个非常好用的轻量级 spinner 组件，使用它可以轻松为项目添加加载中的动画效果。本文详细介绍了 ngx-spinner 的安装和使用方法，以及配置 spinner 的属性。希望本文能够对你的前端开发工作有所帮助。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/80085