Muestre un gif de carga para cada solicitud http Angular 4

Soy bastante nuevo con Angular, así que lo que necesito es mostrar un spinner cada vez que se realiza una solicitud http.

Tengo muchos componentes:

     

Cada uno tiene una solicitud http que obtiene o guarda algunos datos, así que cuando se realiza la solicitud http quiero mostrar mi componente , así que supongo que no es una buena práctica inyectar mi componente de carga en cada otro componente con un solicitud de http ¿Puedo agregar un filtro o algo de angular que me permita cargar el componente automáticamente en cada componente que tenga una solicitud http?

Además, cuando la solicitud http esté lista, quiero mostrar un mensaje como “Listo” o algo así.

Si alguien puede darme una solución que realmente agradeceré, ty.

UPD: plunker . Eche un vistazo a las app.ts . Perdón por tener todo en un solo archivo.

En Angular 4.3 hay un nuevo HttpClientModule que admite interceptores. La idea principal es tener algo como esto:

 @Injectable() export class LoadingIndicatorService { private _loading: boolean = false; get loading(): boolean { return this._loading; } onRequestStarted(): void { this._loading = true; } onRequestFinished(): void { this._loading = false; } } 

Y luego solo aplicas la lógica de la respuesta de Christopher a tu HttpInterceptor.

Lo único que debes tener en cuenta es una solicitud simultánea. Esto se puede resolver, por ejemplo, generando un identificador único para cada solicitud y almacenándolo en alguna parte hasta que finalice la solicitud.

Luego puede tener un componente global LoadingIndicator que inyecte el servicio LoadingIndicatorService .

Para más detalles sobre HttpClientModule: https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b

Una solicitud http devuelve un Observable que se puede suscribir.

Por ejemplo, tomemos la autenticación de un usuario.

En mi servicio:

 login(email: string, password: string): Observable { let url = this.authUrl + '/login'; return this.http .post(url, JSON.stringify({ email, password })) .map(res => res.json()); } 

Llamo y me suscribo a este método en mi componente:

  this.isLoading = true; this.authService.login(email, password) .subscribe(data => { this.isLoading = false; // Do whatever you want once the user is logged in // Where 'data' is the User returned by our http request }, error => { // Handle errors here } 

Tenga en cuenta que boolean isLoading que se establece en true antes de intentar iniciar sesión en nuestro usuario, y false una vez que la autenticación es exitosa.

Esto significa que puede mostrar y ocultar su animación de carga con este booleano, como este:

  

Vea estos dos paquetes de npm:

  1. ngx-progressbar , que puede mostrar un indicador de espera automáticamente por solicitud (consulte la barra de carga de Automagic ), eventos del enrutador o cuando lo necesite. Ver demostración

  2. ng-http-loader (solo para Angular 4.3+), que hace el mismo trabajo de una manera más tradicional y cuenta con elegantes hilanderos de SpinKit .

en tu component.ts

 public loading: boolean = false; 

dentro de tu component.html

 

Cuando necesite ver el icono de carga, simplemente configure this.loading = true; y para ocultarlo this.loading = false; Esto ocultará los componentes que no deseas ver durante la carga y mostrará el ícono de carga en su lugar

Con angular 2+, crea un componente util reutilizable

 import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-progress-mask', templateUrl: './progress-mask.component.html', styleUrls: ['./progress-mask.component.css'] }) export class ProgressMaskComponent implements OnInit { @Input() showProgress:boolean = false; constructor() { } ngOnInit() { } } 

La parte html:

 

la parte de CSS:

 .loadWrapper { background: rgba(0,0,0,0.3); width: 100%; height: 100%; position: fixed; top:0px; left:0px; z-index: 99999; } .loader { border: 5px solid #f3f3f3; /* Light grey */ border-top: 5px solid #3d3e3f; /* gray */ position: absolute; left: 50%; top: 50%; border-radius: 50%; width: 50px; height: 50px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 

Ahora inserta esto en tu componente

Vincular showMask de su componente al componente util reutilizable