Afficher un gif de chargement pour chaque requête http Angulaire 4

Je suis assez nouveau Angulaire donc ce dont j'ai besoin, c'est de montrer spinner chaque fois que lorsqu'une requête http est fait.

J'ai beaucoup de composants:

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

Chacun dispose d'une requête http get ou enregistrer certaines données de sorte que lorsque la requête http est fait, je veux montrer à mes <loading></loading> composant donc je suppose que n'est pas une bonne pratique de l'injection de mon chargement du composant dans chaque autre composant à une requête http. Puis-je ajouter un filtre ou quelque chose angulaires qui me permet de charger le <loading> composant automatiquement dans chaque composant qui a une requête http?

Également lorsque la requête http est fait, je veux afficher un message comme "Fait" ou quelque-chose.

Si quelqu'un peut me donner une solution pour que je vais vraiment apprécier, ty.

Double Possible de Angulaire 2 loader sur chaque requête http
cochez cette lien il a une question et une réponse pour le problème

OriginalL'auteur mcmwhfy | 2017-07-26

  1. 14

    UPD: plunker. Jetez un oeil à app.ts. Désolée d'avoir tout dans un seul fichier.

    Angulaire 4.3 il y a un nouveau HttpClientModule qui prend en charge les intercepteurs. L'idée principale est d'avoir quelque chose comme ceci:

    @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 alors que vous venez d'appliquer la logique de la part de Christophe, en réponse à votre HttpInterceptor.

    La seule chose que vous devez être conscient de requête simultanée. Ce problème peut être résolu par exemple en générant un identifiant unique à chaque demande et à le stocker quelque part jusqu'à ce que la demande n'est pas terminée.

    Alors vous pouvez avoir un mondial LoadingIndicator composant qui injecte LoadingIndicatorService.

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

    est disponible aussi en 4.2.2 ?
    Seulement à partir de 4.3.0. Eh bien, ce n'est pas une version majeure. Il devrait être fait vers l'arrière-compatible.
    avez-vous un plunker avec un petit exemple de ce, seulement si vous avez développé quelque chose de similaire et il est facile pour vous de créer un plunker, ne pas dépenser beaucoup de temps.
    mis à jour le post avec plunker
    Merci pour le plunker lien. Malheureusement j'ai un problème lorsque j'utilise votre "LoadingIndicatorService" dans mon application.composants les composants enfants. Je reçois toujours un "ExpressionChangedAfterItHasBeenCheckederror". Avez-vous une idée de pourquoi? Aussi loin que je peux voir qu'il a quelque chose à voir avec la propriété "chargement" dans l'application.composante.

    OriginalL'auteur Vadim Khamzin

  2. 5

    Une requête http renvoie un Observable qui peut être souscrit.

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

    Dans 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());
}

    Je l'appelle et vous abonner à 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
         }

    Note le booléen isLoading qui est définie sur true avant d'essayer de connecter nos utilisateurs, et pour de faux une fois que l'authentification est réussie.

    Cela signifie que vous pouvez afficher et masquer votre animation de chargement avec cette valeur, comme tel:

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

    OriginalL'auteur Christopher

  3. 5

    Découvrez ces deux packages npm:

    1. ngx-progressbar, qui peut montrer une attente indicateur automatiquement par demande (voir automagic barre de chargement), routeur événements ou quand vous en avez besoin. Voir démo.

    2. ng-http-chargeur (Angulaire 4.3+ seulement), qui fait le même travail de façon plus traditionnelle, et a fantaisie filateurs de SpinKit.

    OriginalL'auteur Alex Klaus

  4. 1

    Angulaire 2+, Créer une réutilisables util composant

    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>

    le CSS de la partie:

    .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); }
}

    Insérez-la à votre composant

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

    Lier showMask de votre composant pour la réutilisables util composant

    OriginalL'auteur Sanjay Singh

  5. 0

    dans votre component.ts

    public loading: boolean = false;

    à l'intérieur de votre component.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, il suffit de définir this.loading = true; et de le cacher this.loading = false; Cela permet de masquer les composants que vous ne souhaitez pas voir pendant le chargement et l'affichage de l'icône de chargement au lieu

    Pourriez-vous me donner plein d'exemple ou de code, j'ai essayé votre méthode, il ne fonctionne pas pour moi

    OriginalL'auteur Wesley Coetzee