概述
ng2-spinner-module 是一个 Angular 2+ 的组件库，包含一个加载动画组件 SpinnerComponent 和一个全局加载器服务 SpinnerService。该组件库能够帮助我们在应用中展示加载动画，并提供一些自定义配置选项来满足不同的需求。
本文将介绍如何使用 ng2-spinner-module，包括安装、配置、使用等方面，并提供一些示例代码和注意事项。
安装
为了使用 ng2-spinner-module，你需要先安装它。你可以使用 npm 进行安装，通过以下命令进行：
npm install ng2-spinner-module --save
使用
安装完成后，你可以在你的项目中引入 ng2-spinner-module：
-- -------------------- ---- -------
------ - ------------- - ---- ---------------------
-----------
-------- -
---
-------------
--
---
--
------ ----- --------- - -然后，你可以在你的组件模板中使用 SpinnerComponent：
<app-spinner [spinner]="customSpinner" [size]="50"></app-spinner>
使用 SpinnerService 可以创建一个全局的加载器：
-- -------------------- ---- -------
------ - -------------- - ---- ---------------------
-----------------
------ ----- ------------ -
------------
------- --------------- --------------
- --
------------- -
---------------------------
-
------------- -
---------------------------
-
-配置
ng2-spinner-module 提供了一些自定义配置选项，你可以在应用中进行配置。
SpinnerComponent 配置选项
以下是 SpinnerComponent 支持的所有配置选项：
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| spinner | string | 尺寸大小和样式，支持的值有'circles', 'lines', 'lines-small' 和自定义字符 | 'circles' |
| size | number/string | 尺寸大小，单位为像素或者百分比，例如 50, '50px', '50%' | 100 |
| color | string | 颜色值，支持浏览器内置颜色或者自定义颜色 | '#333' |
| speed | number | 加载动画速度，单位为秒 | 1.4 |
| thickness | number | 圆环的宽度，只在使用'circles' spinner 时有效 | 4 |
| lines | number | 线的数量，只在使用'lines' 和 'lines-small' spinner 时有效 | 12 |
你可以通过以下方式来修改这些属性的值：
<app-spinner [spinner]="'lines'" [size]="'20px'" [color]="'#f44336'" [speed]="1.5"></app-spinner>
SpinnerService 配置选项
以下是 SpinnerService 支持的所有配置选项：
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| id | string | 加载器 ID，可用于在全局加载器上调用 show 和 hide 方法 | 'app-spinner' |
| color | string | 颜色值，支持浏览器内置颜色或者自定义颜色 | '#333' |
| type | string | 加载器类型，只支持 SpinnerComponent 支持的类型 | 'circles' |
你可以在你的应用的根模块中配置 SpinnerService：
-- -------------------- ---- -------
------ - -------------- -------------------- - ---- ---------------------
----- -------------- -------------------- - -
------ ----------
----- ----------
--- -------------------
--
-----------
-------- -
---
------------------------------------
--
---
--
------ ----- --------- - -示例代码
下面是一些示例代码，展示了如何使用 ng2-spinner-module 中的组件和服务。
SpinnerComponent
<app-spinner [spinner]="'lines-small'" [size]="'50px'" [color]="'#2196f3'" [speed]="1"></app-spinner>
SpinnerService
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ---------------------
-----------------
------ ----- ------------ -
------------
------- --------------- --------------
- --
------------- -
---------------------------
-
------------- -
---------------------------
-
-注意事项
- ng2-spinner-module 只在 Angular 2+ 版本中提供支持，如果你使用其他版本的 Angular，请确认是否能够支持。
- 修改 SpinnerService 的配置选项时，需要在应用的根模块中配置 SpinnerModule 并传递 SpinnerServiceConfig 实例。
- 在使用 SpinnerService 时，需要根据实际需求调用 show 和 hide 方法。
结论
ng2-spinner-module 能够帮助我们在应用中展示加载动画，并提供了一些自定义配置选项来满足不同的需求。在本文中，我们介绍了如何安装、配置和使用 ng2-spinner-module，同时提供了一些示例代码和注意事项，希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bde81e8991b448e58d9