为每个http请求Angular 4显示一个加载gif [英] Show a loading gif for each http request Angular 4

问题描述

我有很多组件：

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

每个人都有一个http请求来获取或保存一些数据，以显示我的<加载>< /加载> 组件，所以我想这不是一个好的做法，通过http请求在每个其他组件中注入我的加载组件。我可以添加一个过滤器或从角度来的东西，允许我在每个有http请求的组件中自动加载< loading> 组件。

另外，当http请求完成时，我想显示一条消息，如完成或someting。

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

=https://plnkr.co/edit/w31HsCRzut9PpEFq3vwN?p=preview =noreferrer> plunker 。看看 app.ts 。抱歉将所有内容都放在一个文件中。

在Angular 4.3中，有一个支持拦截器的新HttpClientModule。主要想法是这样的：

  @Injectable（）
导出类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-accessible-rest-web-services-with-angular-2305b8fd654b

I'm quite new with Angular so what I need is to show a spinner each time when a http request is done.

I have many components:

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

Each one has a http request that get or save some data so when the http request is made I want to show my <loading></loading> component so I suppose is not a good practice injecting my loading component in each other component with a http request. Can I add a filter or something from angular that allows me to load the <loading> component automatically in each component that has an http request?

Also when the http request is done I want to show a message like "Done" or someting.

If anyone can provide me a solution for that I'll really appreciate, ty.

解决方案

UPD: plunker. Take a look at app.ts. Sorry for having everything in a single file.

In Angular 4.3 there is a new HttpClientModule which supports interceptors. The main idea is to have something like this:

@Injectable()
export class LoadingIndicatorService {

    private _loading: boolean = false;

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

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

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

And then you just apply the logic from Christopher's answer to your HttpInterceptor.

The only thing you should be aware of are simultaneous request. This can be solved for example by generating a unique identifier to each request and storing it somewhere until the request is finished.

Then you can have a global LoadingIndicator component which injects LoadingIndicatorService.

For more details on HttpClientModule: https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b

这篇关于为每个http请求Angular 4显示一个加载gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！