最近在开发一个前端项目时，需要显示加载中的动画效果，经过一番查找，发现了一个非常好用的 npm 包：ngx-spinner。ngx-spinner 是一个基于 Angular 的轻量级 spinner 组件，简单易用，支持多种动画效果。本篇文章将介绍如何使用 ngx-spinner，让你在前端开发中事半功倍。
安装 ngx-spinner
安装 ngx-spinner 很简单，只需要在命令行中输入：
npm install ngx-spinner --save
这个命令中，--save 参数表示把 ngx-spinner 添加至项目依赖中。接下来，在你的模块文件中导入 ngx-spinner：
-- -------------------- ---- ------- ------ - ---------------- - ---- -------------- ----------- --- -------- - --- ---------------- -- --- -- ------ ----- --------- - -展开代码
使用 ngx-spinner
在导入 ngx-spinner 后，就可以在代码中使用了。ngx-spinner 有两种使用方式，一种是通过调用 show() 和 hide() 方法来手动控制 spinner 的显示和隐藏，另一种是通过装饰器 @ngxSpinner 来自动控制。
手动控制
手动控制 spinner 首先要在模板中添加 ngx-spinner 组件：
<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-clip-rotate-multiple"></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和largecolor- 颜色type- 动画类型，支持多种类型，比如ball-clip-rotate-multiple、cube-grid等
总结
ngx-spinner 是一个非常好用的轻量级 spinner 组件，使用它可以轻松为项目添加加载中的动画效果。本文详细介绍了 ngx-spinner 的安装和使用方法，以及配置 spinner 的属性。希望本文能够对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80085
