ng4-slim-loading-bar 是一个非常有用的 npm 包，它可以让你轻松地创建一个漂亮的进度条，在加载应用程序的时候给用户一个更好的体验。在本篇文章中，我们将会详细讲解该包的使用方法以及如何将它应用到 Angular 4 项目中。
安装
首先，我们需要使用 npm 在我们的项目中安装 ng4-slim-loading-bar。打开你的命令行，进入到你的项目根目录，然后执行以下命令：
npm install ng4-slim-loading-bar --save
这个命令会自动安装包，并将其添加到你的项目中的 package.json文件中。
概念
在开始使用 ng4-slim-loading-bar 之前，我们需要了解一些概念。这个包中有几个重要的概念：
SlimLoadingBarService：提供了 API 以更新进度条的状态。SlimLoadingBarComponent：进度条组件。
使用 SlimLoadingBarService
在你的组件中，你需要先导入 SlimLoadingBarService，然后在组件的构造函数中注入它：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- -----------------------
------------
--------- ---------------
--------- -
------- ------------------------------ ----------------
------- ---------------------------- ----------------
-
--
------ ----- ----------- -
------------------- ---------------------- ---------------------- --
-------------- -
-----------------------------------
-
------------- -
----------------------------------
-
-startLoading 和 stopLoading 方法将在进度条中显示一个加载状态。当你调用 start 方法时，进度条显示为加载状态，当你调用 stop 方法时，进度条完成加载并隐藏。
另外，也可以通过设置 progress 属性来更新进度条的状态：
this.slimLoadingBarService.progress = 30;
这会将进度条的状态设置为 30%。借助此方法，你可以非常精确地控制进度条的状态。
使用 SlimLoadingBarComponent
在你的 HTML 文件中，你需要使用 slim-loading-bar 标签来创建进度条组件。你可以在你的导航栏或者在你的应用程序的某个固定位置显示进度条。
下面是一个简单的示例，演示如何使用进度条组件：
-- -------------------- ---- -------
-------------------------------------
-----
---- --------------------
-- -------- --------------------- -------
--- --------------- ------------ ----------------------
------ -----------------------
------ -----------------------------
------ --------- ------------------------------ ----------------
------ --------- ---------------------------- ----------------
-----
------
------在这个 HTML 中，我们在导航栏下方添加了一个进度条组件。当我们单击“Start Loading”按钮时，进度条将开始加载；当我们单击“Stop Loading”按钮时，进度条将隐藏起来。
总结
通过本篇文章的讲解，你已经学会了如何使用 ng4-slim-loading-bar 进行打造一个进度条。这个包可以帮助你为用户提供更流畅、更舒适的用户体验。如果你还没有使用过该包，不要错过了它的作用！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055afd81e8991b448d8a6b