显示每个 http 请求的加载 gif Angular 4

2023-11-26

我对 Angular 还很陌生,所以我需要展示一个spinner每次 http 请求完成时。

我有很多组件:

<component-one></component-one>
<component-two></component-two>
<component-three></component-three>
<component-n></component-n>

每个都有一个获取或保存一些数据的 http 请求,因此当发出 http 请求时,我想显示我的<loading></loading>所以我认为通过 http 请求将我的加载组件注入到每个其他组件中并不是一个好的做法。我可以添加一个过滤器或来自角度的东西来允许我加载<loading>组件自动出现在每个有http请求的组件中?

另外,当 http 请求完成时,我想显示一条消息,例如“完成”或其他内容。

如果有人能为我提供解决方案,我将非常感激,ty。


UPD: plunker。看一眼app.ts。抱歉将所有内容都放在一个文件中。

在 Angular 4.3 中,有一个新的 HttpClientModule 支持拦截器。主要思想是有这样的东西:

@Injectable()
export class LoadingIndicatorService {

    private _loading: boolean = false;

    get loading(): boolean {
        return this._loading;
    }

    onRequestStarted(): void {
        this._loading = true;
    }

    onRequestFinished(): void {
        this._loading = false;
    }
}

然后您只需将 Christopher 的答案中的逻辑应用到您的 HttpInterceptor 即可。

您唯一应该注意的是同时请求。例如,可以通过为每个请求生成唯一标识符并将其存储在某处直到请求完成来解决此问题。

然后你就可以拥有一个全局的LoadingIndicator注入的组件LoadingIndicatorService.

有关 HttpClientModule 的更多详细信息:https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

显示每个 http 请求的加载 gif Angular 4 的相关文章

随机推荐

  • Cordova“无法获取插件”错误

    我最近经常遇到 无法获取插件错误 如果我下载自己的分支 似乎特别容易支撑 t2wu THW air Documents Work John DEMO APP BCAppII dev 科尔多瓦 插件添加https github com t2w
  • 在 iPhone 上打开 .webarchive?

    有谁知道是否可以在 iPhone 上以编程方式打开 webarchive webarchive 是 Safari 将网页及其关联资源打包到单个文件中的方式 我尝试创建一个并浏览移动Safari中的一个链接 但它不起作用 注意 我希望这可以在
  • 如何使用 pkgbuild 将默认安装位置指定为 $HOME?

    我正在将安装程序从 PackageMaker 移植到 pkgbuild 并尝试将默认安装位置设置为当前用户的主目录 并且仍然允许用户在系统范围内安装 在我的分发文件中 我有enable currentUserHome true 和enabl
  • 如何在R中读取utf-8编码文本[关闭]

    Closed 这个问题需要调试细节 目前不接受答案 我正在将 xlsx 文件导入到 R 中 当我输入打印数据命令时 我遇到了特定符号的混乱 该文件可以用 Excel 很好地打开 这是我使用的代码 library xlsx data lt r
  • Git hook 用于发送有关存储库更改的电子邮件通知

    如何配置适当的 Git 挂钩 以便在将一组更改推送到上游存储库时发送摘要电子邮件 另一种更现代的方法是git 多邮件 正如建议的Chords below 2009年你就是这么做的 你可以添加类似的东西this到 GITDIR hooks 中
  • 检查c++中所有变量是否等于相同的值[重复]

    这个问题在这里已经有答案了 比较多个变量以查看它们是否都是相同值的最简单方法是什么 例如 如果 var1 53 并且我想检查 var2 或 var3 是否等于 var1 且彼此相等 到目前为止我已经这样做了 if row1 row2 row
  • 创建接受不同数据类型参数的 C 函数

    我对 C 编程语言比较陌生 我试图弄清楚如何创建一个可以接受不同类型的数据作为参数的函数 该函数应该计算并返回字符或整数数组中的元素数量 我已经有两个独立的函数可以执行此操作 但我真的希望能够使用一个函数来完成这两项任务 有没有办法在 C
  • Selenium 独立服务器未启动

    我在 VPS 上启动 selenium 独立服务器时遇到麻烦 root PIV usr share nginx pivdev tests java jar selenium server jar Output 21 53 08 857 IN
  • Maven:如何在离线模式下安装插件

    我坐在防火墙后面 因此 Maven 无法连接到中央存储库 下面给出了错误消息 不过 我可以通过 HTTP 连接到互联网 如何在离线模式下安装 Maven 插件 例如 archetype 即在浏览器中下载一些文件 然后通过执行一些命令来安装插
  • 如何发现嵌入资源的“路径”?

    我将 PNG 作为嵌入资源存储在程序集中 在同一个程序集中 我有一些如下代码 Bitmap image new Bitmap typeof MyClass Resources file png 该文件名为 file png 存储在 Reso
  • 添加代理以反应 package.json 后不断收到“代理错误:无法代理请求”错误

    我按照这个基本指南来设置一个同时运行 React 和 Node 的本地开发环境 添加 代理 后我陷入困境 http 本地主机 4001 对react目录的package json的声明 它一直说 代理错误 无法代理请求 flower从loc
  • AWS Lambda:无法从“PIL”导入名称“_imaging”

    我目前尝试运行此 AWS Lambda 入门教程 https docs aws amazon com lambda latest dg with s3 example deployment pkg html with s3 example
  • SwiftUI 中 DragGesture 和 ScrollView 的交互

    在我正在开发的应用程序中 有一个部分主要有 前进 导航 点击按钮将显示下一张幻灯片 然而 辅助 向后 导航也是必要的 这是我使用的方法 import SwiftUI struct Sample View State private var
  • Mongoose .save() 和使用 update() 之间的区别

    要修改 mongoose 中现有条目中的字段 使用之间有什么区别 model new Model model field new value model save and this Model update set field new va
  • 我的 Tomcat 应用程序可以写入 Ubuntu 服务器上的哪些文件夹

    我不确定在这种情况下我使用 Ubuntu Server 是否重要 当我尝试使用 File mkdirs 方法创建文件夹时 它不会抛出异常 只是永远不会工作 可以在这里找到我的问题的具体代码参考的详细解释 无法在服务器上创建目录 权限问题 我
  • Jquery - fancybox 和回调

    我的 fancybox 有问题 我想编写一个在 fancybox 打开时运行的函数 如何以及何时调用该函数 Example function myFunc alert Opened content a fancybox hideOnCont
  • 如何从 Travis-CI 构建中获取万无一失的报告?

    这个问题确实说明了一切 如何下载或查看在 Travis 上构建期间生成的 Surefire 报告 你可以这样做 after failure cat target surefire reports txt
  • 在 ionic 中对齐按钮

    我正在学习 ionic 我想将我的 3 个按钮对齐到左 中 右 即左侧第一个按钮 中间第二个按钮 右侧第三个按钮 但我不知道该怎么办 这是我的代码 div div
  • HIbernate 5:生成器类=“序列”不工作

    我有以下映射
  • 显示每个 http 请求的加载 gif Angular 4

    我对 Angular 还很陌生 所以我需要展示一个spinner每次 http 请求完成时 我有很多组件