导言
使用Angular开发前端项目的过程中，我们常常需要使用httpClient与后端进行数据交互，同时也需要提供给用户友好的交互体验。在这篇文章中，我们将介绍如何使用@ngx-progressbar/http-client来提供给用户一个更好的交互体验。
安装和配置
安装： 在我们的Angular项目中，打开命令行并输入以下命令：
npm install @ngx-progressbar/http-client --save
配置： 使用@ngx-progressbar/http-client必须要先引入BrowserAnimationsModule，并在app.module.ts中引入NgProgressModule。
-- -------------------- ---- ------- ------ - ----------------------- - ---- --------------------------------------- ------ - ---------------- - ---- ------------------------ ------ - -------------------- - ---- ------------------------------- ----------- -------- - ------------------------ --------------------------- -------------------- -- --
使用
在使用httpClient的时候，我们需要对代码进行一些修改。
在Service中修改
在我们的Service中添加以下代码：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- ------------------------
------ - -------------------- - ---- -------------------------------
-------------
----------- -------
--
------ ----- --------- -
------------------- ----- ----------- ------- --------- ----------- ------- ------------- --------------------- -
----------------------------
--------------------------------
-
---------- --------------- -
------ ----------------------------------
-
-------------- -------- --------------- -
------ ----------------------------------- -----
-
-在Component中修改
在我们的component中，添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ---------------
------ - ---------- - ---- ------------------------
------ - ------------ - ---- -----------------
------------
--------- -------------------
--------- -
------- ----------------------- -------------
------- ------------------------- -------------
--
--
------ ----- ----------- ---------- ------ -
------------------- ---------- ---------- ------- --------- ----------- --
---------- -
----------------------------
------------------------------
-----------------
---------------- -- -
-------------------------------
------------------
---
-
--------- -
------------------------------
-----------------
---------------- -- -
------------------
---
-
---------- -
----- ---- - -
----- -------
---- ---
------ -------------------
--
-----------------------------------
-----------------
---------------- -- -
------------------
---
-
-优化用户体验
现在我们已经使用@ngx-progressbar/http-client成功地在Angular项目中实现了数据请求过程的进度条展示，但是在我们的实际场景中，用户可能会在短时间内频繁地发起请求。如果每次请求都显示进度条的话，势必会影响用户体验。因此，我们可以使用rxjs中的debounceTime方法对请求进行节流处理，让用户体验更加流畅。
总结
在这篇文章中，我们介绍了如何使用@ngx-progressbar/http-client，让Angular项目拥有更好的用户交互体验。同时还介绍了如何使用rxjs中的debounceTime方法对请求进行优化处理。在我们的实际项目中，如果需要实现进度条的高级功能，@ngx-progressbar/core也是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8a238a385564ab6e0f