什么是 ng4-loader-bar？
ng4-loader-bar 是 Angular 4 的一个进度条组件，它可以帮助我们在应用中添加一个漂亮的进度条，使得用户可以更好地感知应用的加载进度和反馈信息，提升用户体验。
安装 ng4-loader-bar
首先，我们需要安装 ng4-loader-bar。
在命令行中输入以下命令：
npm install --save ng4-loader-bar
这样就能在项目的 package.json 文件中添加 ng4-loader-bar 的依赖，并自动安装所需的组件。
使用 ng4-loader-bar
接下来，我们需要在 Angular 模块中导入 ng4-loader-bar。
在项目的 app.module.ts 文件中添加以下代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ----------------------- - ---- ---------------------- ----------- -------- - -------------- ----------------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
这样，我们就能在应用中使用 ng4-loader-bar 了。
在组件中使用 ng4-loader-bar
在组件中使用 ng4-loader-bar 很简单。我们只需要在组件中导入 Ng4LoadingSpinnerService ，然后调用 show() 和 hide() 方法就可以了。
在组件的 .component.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------------ - ---- ----------------------
------ - ---------- - ---- -----------------------
--------- ---- -
----- -------
---- -------
-
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------ -------
------------------- --------------- ------------------------- ------- ----- ----------- --
---------- -
---------------------------
---------------------------
------------------ ------- -- -
---------- - ------
---------------------------
---
-
-在上面的代码中，我们先导入了 Ng4LoadingSpinnerService 和 HttpClient。然后在 getUsers() 方法中，我们调用了 spinnerService.show() 方法，显示进度条。接着，我们使用 HttpClient 获取用户数据，并在请求成功后隐藏进度条。
自定义进度条
ng4-loader-bar 还提供了自定义进度条的功能。我们可以通过调用 Ng4LoadingSpinnerService 上的 setDefaults 方法自定义控制进度条的属性。
在上面的代码中，我们可以修改进度条的颜色和大小。例如，我们将颜色修改为蓝色，大小修改为 50px：
constructor(private spinnerService: Ng4LoadingSpinnerService, private http: HttpClient) {
this.spinnerService.setDefaults({
color: '#007bff',
spinnerSize: 50,
});
}示例代码
上面的所有示例代码都可以在 这个 GitHub 仓库 中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eac81e8991b448dc257