web-dev-qa-db-fra.com

Montrer un gif de chargement pour chaque requête http Angular 4

Je suis assez nouveau avec Angular, donc ce dont j'ai besoin, c’est d’afficher une spinner à chaque fois qu’une requête http est effectuée.

J'ai plusieurs composants:

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

Chacune a une requête http qui récupère ou enregistre des données. Ainsi, lorsque la requête http est faite, je veux montrer mon composant <loading></loading>. Je suppose que ce n’est pas une bonne pratique d’injecter mon composant de chargement dans chaque composant avec une requête http. Puis-je ajouter un filtre ou quelque chose d'angular qui me permet de charger le composant <loading> automatiquement dans chaque composant ayant une requête http? 

De plus, lorsque la requête http est terminée, je souhaite afficher un message du type "Terminé" ou "Sometting".

Si quelqu'un peut me fournir une solution, j'apprécierai vraiment, ty.

javascripthtmlangulartypescript
6
mcmwhfy

UPD: plunker . Jetez un coup d'œil à app.ts. Désolé de tout avoir dans un seul fichier.

Dans Angular 4.3, il existe un nouveau module HttpClientModule qui prend en charge les intercepteurs. L'idée principale est d'avoir quelque chose comme ça:

@Injectable()
export class LoadingIndicatorService {

    private _loading: boolean = false;

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

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

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

Et ensuite, vous appliquez simplement la logique de la réponse de Christopher à votre HttpInterceptor. 

La seule chose dont vous devez être conscient est une demande simultanée. Cela peut être résolu par exemple en générant un identifiant unique pour chaque requête et en le stockant quelque part jusqu'à la fin de la requête.

Ensuite, vous pouvez avoir un composant global LoadingIndicator qui injecte LoadingIndicatorService.

Pour plus d'informations sur HttpClientModule: https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b

14
Vadim Khamzin

Une demande http retourne une Observable à laquelle il est possible de s'abonner.

Par exemple, prenons l'authentification d'un utilisateur.

A mon service:

login(email: string, password: string): Observable<User> {
    let url = this.authUrl + '/login';

    return this.http
        .post(url, JSON.stringify({ email, password }))
        .map(res => res.json());
}

J'appelle et je m'abonne à cette méthode dans mon composant:

 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
         }

Notez que la valeur booléenne isLoading est définie sur true avant d'essayer de vous connecter à l'utilisateur, et sur false une fois l'authentification réussie.

Cela signifie que vous pouvez afficher et masquer votre animation de chargement avec ce booléen, comme ceci:

<loading-component *ngIf="isLoading"></loading-component>
5
Christopher

Découvrez ces deux packages NPM:

  1. ngx-progressbar , qui peut afficher un indicateur d’attente automatiquement par demande (voir barre de chargement automagic ), événements de routeur ou à tout moment. Voir demo .

  2. ng-http-loader (pour Angular 4.3+ uniquement), qui effectue le même travail de manière plus traditionnelle et qui possède des filateurs de fantaisie issus de SpinKit .

4
Alex Klaus

Avec angular 2+, créez un composant util réutilisable

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 partie html:

<div class="loadWrapper" *ngIf="showProgress">  
  <div class="loader"></div>  
</div>

la partie 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); }
}

Maintenant, insérez ceci dans votre composant

<app-progress-mask [showProgress]="showMask"></app-progress-mask>

Liez showMask de votre composant au composant util réutilisable

1
Sanjay Singh

dans votre component.ts

public loading: boolean = false;

dans votre composant.html

<div *ngIf="!loading">
  <component-one></component-one>
  <component-two></component-two>
  <component-three></component-three>
  <component-n></component-n>
</div>

<loading *ngIf="loading"></loading>

Chaque fois que vous avez besoin de voir l’icône de chargement, définissez simplement this.loading = true; et masquez-la this.loading = false;. Ceci masquera les composants que vous ne voulez pas voir pendant le chargement et affichera plutôt l’icône de chargement.

0
Wesley Coetzee