架构师_程序员_码农网

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 56|回复: 0

[Angular] Angular 17 系列(十九)全局设置 HTTP 请求加载动画

[复制链接]
发表于 2024-6-10 15:09:56 | 显示全部楼层 |阅读模式
需求:HTTP 请求是一个非常耗时的过程,当用户在前端提交一个表单,后端需要各种校验然后再持久化的数据库,之间还要通过网络进行传输数据。当用户提交表单后,我们不希望用户能够点击界面的任何操作(或者不希望重复点击提交)。我们需要一个全局 loading 的动画。

ng-http-loader 此包提供了一个 HTTP 拦截器和一些旋转器组件(目前全部来自SpinKit )。HTTP 拦截器会监听所有 HTTP 请求,并在待处理的 HTTP 请求期间显示旋转器/加载器指示器。

NPM 地址:https://www.npmjs.com/package/ng-http-loader
GitHub 地址:https://github.com/mpalourdio/ng-http-loader

根据自己的 Angular 版本安装合适的 ng-http-loader 版本,以 Angular 17 版本为例,安装命令如下:

QQ截图20240610144946.jpg

由于我是独立组件,修改 app.config.ts 如下:

同时,app.component.ts 组件修改如下:

最后,修改 app.component.html 代码如下:

效果图如下:

http-loading.gif

关于加载动画样式效果,请参考如下:

export const Spinkit = {
    skChasingDots: 'sk-chasing-dots',
    skCubeGrid: 'sk-cube-grid',
    skDoubleBounce: 'sk-double-bounce',
    skRotatingPlane: 'sk-rotationg-plane',
    skSpinnerPulse: 'sk-spinner-pulse',
    skThreeBounce: 'sk-three-bounce',
    skWanderingCubes: 'sk-wandering-cubes',
    skWave: 'sk-wave'
};
(完)





上一篇:Angular 17 系列(十八)ForkJoin 等待多个 HTTP 并行请求
下一篇:C#/.NET 使用 SequenceEqual 比较两个集合是否相等
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2024-6-18 16:39

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表