Angular 17 系列（十九）全局设置 HTTP 请求加载动画

小渣渣

需求：HTTP 请求是一个非常耗时的过程，当用户在前端提交一个表单，后端需要各种校验然后再持久化的数据库，之间还要通过网络进行传输数据。当用户提交表单后，我们不希望用户能够点击界面的任何操作（或者不希望重复点击提交）。我们需要一个全局 loading 的动画。

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

NPM 地址：超链接登录可见。
GitHub 地址：超链接登录可见。

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

登录可见。

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

登录可见。

同时，app.component.ts 组件修改如下：

登录可见。

最后，修改 app.component.html 代码如下：

登录可见。

效果图如下：



关于加载动画样式效果，请参考如下：

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'
};

（完）