前言
随着当今互联网技术的发展，前端技术日新月异，各种新的开源库和框架层出不穷，为前端开发提供了更多的可选项。本篇文章将介绍一款前端库——@chevtek/angular-spinners。它是一款用于 Angular 应用程序中添加动态加载指示器的 npm 包。目前，它是Angular 官方框架推荐的一款加载指示器库。它提供了不同类型的加载指示器和对应的配置选项，除此之外，它还支持自定义颜色、大小和样式。让我们一起来看看如何安装和使用它。
安装
你可以通过 npm 安装**@chevtek/angular-spinners**：
npm install @chevtek/angular-spinners --save
安装到 node_modules 中，并将其添加到 package.json 依赖项中。
导入
在使用之前，需要将它导入到你的 Angular 应用程序中，你可以在你的 app.module.ts 中这样做：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------- - ---- ----------------- ------ - ------------ - ---- ------------------ ------ - ---------------- - ---- ---------------------------- ----------- -------- --------------- ------------ ---------------- -- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
这里我们将它应用到了 AppModule 中，并且导入了 BrowserModule、FormsModule 在应用程序模块中。这里的 NgxSpinnerModule 是从 @chevtek/angular-spinners 库中导入的。
使用
在上面的步骤完成之后，我们就可以在我们的应用中使用加载指示器了。这里要提到一下，目前 @chevtek/angular-spinners 支持14种不同的指示器类型。你可以从官方文档找到每种类型的详细配置信息。下面，我们来看看如何在我们的项目中使用它。
基本使用
接下来，我们将在 AppComponent 组件中使用 loading 指示器。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- ----------------------------
------------
--------- -----------
--------- -
------- ----------------------- ----------------------- ----------------
---- ----------------
------------ ---------------------------- --------------
-- ------------- ---------------------
--------------
------
--
--
------ ----- ------------ -
------- - ------
------------------- -------- ------------------ - -
------------- -
------------ - -----
--------------------
------------- -- -
------------ - ------
--------------------
-- ------
-
-这里我们使用了模板语法来渲染指示器组件 ngx-spinner，将 loading 设置为 false 并在 AppComponent 中定义 showSpinner 方法。当我们点击“显示 Spinner”按钮时，将 loading 设置为 true 并显示 loading 指示器，两秒后隐藏指示器。在这里，我们使用了 load-spinner 的 size 属性设置其大小，设置 bdColor 属性为指示器边框颜色。
配置选项
在使用之前，我们还可以对指示器进行一些配置。例如，我们可以修改指示器的样式、大小、颜色等。下面是一些可配置的选项：
| 选项 | 描述 |
|---|---|
| type | 指示器类型。 |
| size | 指示器大小。必须是 lg、md、sm、xs 或任何像素值。 |
| color | 指示器颜色。 |
| bdColor | 指示器边框颜色。 |
| textColor | 指示器文字颜色。 |
| fullScreen | 是否在全屏模式下显示指示器。 |
| templateRef | 自定义加载指示器的模板视图。 |
| zIndex | 指示器容器的 CSS z-index 属性。 |
| noSpinner | 是否禁用 Spinner。默认值为 false。仅在 ngx-progress-bar-spinner 中有效。 |
我们来看看如何使用这些配置选项。
<ngx-spinner [type]="type" [size]="size" [color]="color" [bdColor]="bdColor" [textColor]="textColor" [fullScreen]="fullScreen" [templateRef]="templateRef" [zIndex]="7" [noSpinner]="false"></ngx-spinner>
自定义模板视图
@chevtek/angular-spinners 还支持使用自定义模板视图来显示指示器。我们可以使用 templateRef 选项指定要使用的模板。
-- -------------------- ---- -------
------ - ---------- ---------- ----------- - ---- ----------------
------ - ----------------- - ---- ----------------------------
------------
--------- -----------
--------- -
------------ -----------------------
-----
---- ------------------------
-- ------------- ---------------------
------
--------------
------- ----------------------------------------------
---- -----------------
------------ ---------------------------- --------------------------------------
--------------
------
--
--
------ ----- ------------ -
-------- - ------
----------------------------------- - ------- ---- -- ---------------------- -----------------
------------------- -------- ------------------ - -
-------------- -
------------- - -----
---------------------------- - --------- -------------------------- ---
------------- -- -
------------- - ------
--------------------
-- ------
-
-这里我们使用 @ViewChild() 装饰器获取了自定义指示器组件的引用，并在 showSpinner1 方法中将 templateRef 选项设置为此组件。
结语
@chevtek/angular-spinners 库提供了简单易用的加载指示器组件，我们可以很方便地将它集成到我们的 Angular 项目中。本文只是大概介绍了它的使用方法和一些配置，你可以根据自己的需要进行修改和扩展，以适合您的具体业务场景。
示例代码
你可以在GitHub上获取这个示例的完整代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568ee81e8991b448e4a31