介绍
kylin-ngx-nprogress 是基于 Angular 的一个进度条插件，它可以非常方便地为基于 Angular 的应用程序添加进度条效果。
安装
使用 npm 进行安装：
npm install kylin-ngx-nprogress --save
使用
引入
在 Angular 的根模块（AppModule）中，引入 kylin-ngx-nprogress 和 ngx-progressbar 样式：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- ------------------
------ - ----------------------- - ---- ----------------------
------ - ------------ - ---- ------------------
-----------
------------- - ------------ --
-------- -
--------------
---------------------------
---------------------------------
--
---------- - ------------ -
--
------ ----- --------- --使用指令
在需要添加进度条效果的组件中，使用 kylinNprogress 指令：
<!-- app.component.html --> <h1 kylinNprogress>My App Header</h1>
配置
通过配置，可以对进度条进行自定义。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ------------------
------------
--------- ---------
--------- -
--- -------------- ---------------------- --- -----------
-
--
------ ----- ------------ -
------- - -
------ ----------
-------- ------
------ ----
--
------------------- --------- ----------- -
----------------- -- -----
------------- -- -
---------------- -- -----
-- ------
-
-示例代码
完整的示例代码，可以在 Kylin-UI 的 GitHub 仓库中找到：https://github.com/Kylin-UI/kylin-ngx-nprogress.
总结
通过引入 kylin-ngx-nprogress，我们可以非常简单地为我们的应用程序添加进度条效果。通过配置，我们可以进行自定义，并且可以灵活控制进度条的启动和完成等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e50520b171f02e1ddf