如何在http调用angular中设置加载器指示器
在Angular中，可以使用加载器指示器来展示正在进行的HTTP调用。下面是设置加载器指示器的步骤：
- 创建一个服务：
首先，在Angular应用中创建一个名为
LoaderService的服务。你可以使用Angular CLI命令ng generate service loader来创建该服务。 - 定义加载器指示器：
在
LoaderService中，定义一个isLoading属性来跟踪HTTP调用的状态。你可以将其初始化为false，表示开始时没有正在进行的HTTP调用。并且定义一个showLoader()方法和hideLoader()方法来设置isLoading属性的值。 - 定义加载器指示器：
在
LoaderService中，定义一个isLoading属性来跟踪HTTP调用的状态。你可以将其初始化为false，表示开始时没有正在进行的HTTP调用。并且定义一个showLoader()方法和hideLoader()方法来设置isLoading属性的值。 - 创建加载器指示器组件：
接下来，创建一个名为
LoaderComponent的组件，用于展示加载器指示器。你可以使用Angular CLI命令ng generate component loader来创建该组件。在组件模板中，使用HTML和CSS来定义加载器指示器的样式。 - 创建加载器指示器组件：
接下来，创建一个名为
LoaderComponent的组件，用于展示加载器指示器。你可以使用Angular CLI命令ng generate component loader来创建该组件。在组件模板中，使用HTML和CSS来定义加载器指示器的样式。 - 添加HTTP拦截器：
在Angular应用中，可以使用HTTP拦截器来在每个HTTP请求前后执行一些操作。我们可以在HTTP拦截器中使用
LoaderService来控制加载器指示器的显示与隐藏。 - 添加HTTP拦截器：
在Angular应用中，可以使用HTTP拦截器来在每个HTTP请求前后执行一些操作。我们可以在HTTP拦截器中使用
LoaderService来控制加载器指示器的显示与隐藏。 - 注册HTTP拦截器：
在应用的
app.module.ts文件中，将HTTP拦截器添加到providers数组中，以便它可以被应用使用。 - 注册HTTP拦截器：
在应用的
app.module.ts文件中，将HTTP拦截器添加到providers数组中，以便它可以被应用使用。 - 在组件中使用加载器指示器：
最后，在需要展示加载器指示器的组件中，可以通过在模板中添加
<app-loader></app-loader>来引用LoaderComponent。 - 在组件中使用加载器指示器：
最后，在需要展示加载器指示器的组件中，可以通过在模板中添加
<app-loader></app-loader>来引用LoaderComponent。
现在，当应用中发起HTTP调用时，加载器指示器将会显示，直到HTTP调用完成后自动隐藏。你可以根据需要自定义加载器指示器的样式和位置。注意，以上是基本的实现步骤，你可以根据实际需求进行适当的调整和扩展。
关于腾讯云相关产品，推荐使用腾讯云的对象存储服务 COS（Cloud Object Storage），它提供了高可靠性、安全性和可扩展性的云存储解决方案。你可以通过以下链接了解更多关于腾讯云对象存储 COS 的信息：
腾讯云对象存储 COS：https://cloud.tencent.com/product/cos
相关·内容
当我调用我的服务时，我想将loader设置为true，一旦加载完成，我想将它设为false，这是我调用服务的地方： this.service.getEventLog(e.turID, dtFromdtTo).subscribe(s => { }); 这是我的服务： getEventLog(ip,from,to){
return this.http.post(this.url_event_log,{},{params:{id: ip,dt
浏览 27提问于2020-10-13得票数 0
回答已采纳
我有三个选项卡的TabView，在每个选项卡中，我有显示应用程序接口正在加载的进度指示器，并在响应来自api.In ios平台后隐藏指示器该指示器隐藏得很好，但安卓平台的指示器不是hide.How解决这个问题</StackLayout></TabView>import { OnInit, Component } from "@angu
浏览 8提问于2018-12-18得票数 0
如何在angular应用程序执行app_initializer代码时显示等待指示器。 到现在为止，我可以显示等待指示器，直到应用程序加载。所以我想展示一些等待指示器。 <app-root>Loading....</app-root> 也尝试过 <app-root></app-root>
<div>Loading...</div> 当app_initializer正在执行时，这些选项都不起
浏览 12提问于2019-04-09得票数 5
我知道在angular js中有几种加载指示器的方法(例如：)。但它们要么必须为每个单独的调用进行配置，要么-如果它们是全局的，如我所希望的-只应用于http-request，而不是$q-promises在服务中使用。到目前为止，我所看到的全局加载指示器使用有没有类似于$q的东西，比如$qProvider.reponseInterceptors例如，可以使用某种
浏览 0提问于2013-07-06得票数 23
回答已采纳
3回答
我必须为我的AngularJs单页面应用程序加载许多文件，如angular.js、jquery.js、bootstrap.js、bootstrap.css、some_plugins.js、my_main.js加载整个应用程序需要一些时间，所以我想在一个空页面中显示一个加载指示器(例如微调器)，直到所有的js和css文件加载，然后显示内容。
浏览 0提问于2014-04-27得票数 11
回答已采纳
1回答
如何在angular2中创建具有指令功能的简单指示器加载按钮，以便可以在父组件中使用具有控制访问权限的everywhere.also？
浏览 2提问于2017-02-06得票数 0
3回答
AngularJS承诺没有回调？
、、、、
通常，当我以异步方式获取一些数据时，我会这样做 function$scope.movieContent = $http.get('/api/v1/movies/avengers'); //updates to real value when request is done
浏览 0提问于2015-01-02得票数 4
我读到过，当有任何http请求时，ngx-progressbar会自动显示进度条。我想知道在创建、读取、更新或删除firebase中的数据时，Angular中是否有任何库或方法来显示进度条。我已经显示了加载指示器，但它的感觉不是很好。我只是在crud进程开始时给指示器标记一个true条件，如果进程完成或失败就给出false值。有时，当数据没有完全显示在页面上时，指示器就会消失。
浏览 2提问于2019-05-01得票数 0
2回答
在我的图像从api加载完成之前，我的活动指示器就会消失。是不是因为api的调用是异步的？如果是这样，我如何在取消活动指示器之前确保调用已完成或图像已加载到屏幕上？我的XAML中的活动指示符代码如下所示： IsVisibleVerticalOptions="Cen
浏览 0提问于2018-07-03得票数 1
response.addCookie(cookie); }
}我正在使用Angular4(最新版本)调用RESTful服务。这是预期的，因为在发送post请求时，X-CSRF-TOKEN标头没有设置，但此标头确实存在：- Set-Cookie:XSRF-TOKEN=；Path=/auth.service.ts：
const_http.post(this.endpoint + th
浏览 0提问于2017-08-19得票数 0
在我的angular应用程序中，我发现chrome (取消) api调用启动得太快了。我还有一个HttpInterceptor，如果每个HttpClient请求还没有完成，它会在500ms之后触发一个加载指示器。然而，对于get (取消)的请求，似乎没有任何新的事件随后隐藏我的加载指示器。
有没有办法在HttpInterceptor中检测“已取消”的请求，这样我就可以再次隐藏我的加载指示器？
浏览 32提问于2018-05-04得票数 17
1回答
我正在构建一个angular 2应用程序。在这个提交页面时，我通过HTTP POST调用web服务，并根据服务响应导航到下一个屏幕。 在此期间，我想显示显示服务请求进度的加载指示器。
浏览 12提问于2019-01-08得票数 0
1回答
我正在为我的Angular 4应用设置延迟加载。我总共有18个延迟加载的模块，我注意到获取它们需要一些时间，所以我决定做一些加载指示器。在本地将其添加到app.component后，一切都正常工作。在生产环境中，我不断收到关于RouterModule未定义的错误。 ? 现在我不能访问任何延迟加载的模块(那些不是延迟加载的模块可以毫无问题地访问)。我试着移除指示器，但事情似乎又开始工作了。我从https:&#x
浏览 21提问于2019-04-26得票数 0
有没有人知道实现带有百分比指示器的Angular 2+预加载器(类似于Gmail的加载屏幕)的好办法？我知道通常的方法是在我们的<app-root>中添加<div>并设置样式，甚至可能添加CSS动画，一旦应用程序加载，它就会被应用程序内容所取代。
但是..。一开始，我在考虑单独的启动组件，它将只被急切地加载的组件，并从那里加载所有其他模块，但如果我将该组件映射到'/‘，如<
浏览 4提问于2018-06-19得票数 11
我希望在从sqLite的数据库中查询信息时显示一条正在加载的消息。mobile.hidePageLoadingMsg(); })此外，我有大约3或4个这样的ajax查询都做了几乎相同的事情，所以加载消息将根据我们当前所在的ajax成功回调而改变。
希望这是有意义的。
浏览 2提问于2013-03-07得票数 0
回答已采纳
如何使用Angular尽可能快地开始从服务器获取数据？ng-controller="MyAppCtrl"> /* bunch of CSS, and other resources */它通过httpGET请求将数据加载到范围中：查看网络面板，此<em
浏览 0提问于2013-04-17得票数 3
回答已采纳
对于Selenium C#，这意味着需要对为特定场景量身定做的页面状态进行大量显式等待(可能是等待加载指示器或特定元素出现)。但是，在大多数情况下，此可视指示器只是异步任务(如HTTP请求)的代理。其他解决方案，如和，有简单的解决方案来等待HTTP请求(这是Protractor中的默认设置)。问题
我维护的其中一个框架是用C#编写的，我正在尝试找到一种解决方案来轻松地等待任何未完成的HTTP请求，而不是编写针对DOM
浏览 4提问于2021-03-18得票数 2
我正在尝试实现一个广泛的应用程序，加载栏。因此，当用户单击我的应用程序中的任何链接时，当数据被下载时，它应该在顶部显示一个加载条。在我的主应用程序组件模板中，我添加了角material2进度条。<md-progress-bar mode="indeterminate" *ngIf="_globalService.isLoading"></md-progress-bar>
现在，每当我启动http请求时，我都会在该组件中将该服务的is
浏览 1提问于2016-05-29得票数 2
回答已采纳
每当我的应用程序挂载时，我都会设置： super(props); loading: true};我有一个活动指示器，它会在loading: false之前一直动态显示 <View style={styles.loading}><ActivityIndicator color="red" animating={this.state.loading
浏览 0提问于2018-03-22得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
