Angulaire 2 loader sur chaque requête http

Ce que je suis en train de faire est de:

Je veux utiliser le compteur à chaque fois qu'une requête http accurs. En d'autres termes je veux utilisateur pour voir un écran de chargement à chaque fois qu'une requête http qui se passe dans mon application.composante.

Mon spinner.composant et spinner-service de fichiers sont les mêmes avec la réponse dans cette question.

Et mon application.composant du composant est

@Component({
    selector: 'todoApi',
    template: `
        <div class="foo">
            <spinner-component></spinner-component>
            <h1>Internship Project</h1>
            <a [routerLink]="['Dashboard']">Dashboard</a>
            <a [routerLink]="['Tasks']">List</a>
            <router-outlet></router-outlet>
        <div>
    `,
    directives: [ROUTER_DIRECTIVES,SpinnerComponent],
    providers: [
        ROUTER_PROVIDERS,
    ]
})

@RouteConfig([
    {
        path: '/dashboard',
        name: 'Dashboard',
        component: DashboardComponent,
        useAsDefault: true
    },{
        path: '/tasks',
        name: 'Tasks',
        component: TaskComponent
    },{
        path: '/detail/:id',
        name: 'TaskDetail',
        component: TaskDetailComponent
    },
])

D'conclue , à chaque fois qu'une requête http survient dans l'une de ces voies, j'en veux pour preuve la touche de navigation pour l'utilisateur. Je sais que cela a été une mauvaise question , mais je suis nouveau sur angulaire 2 et je voudrais vraiment être reconnaissant si quelqu'un pouvait m'aider.

Merci beaucoup!
Edit!:

Solution avec Günther réponse:
J'ai enveloppé mes http et spinner-service dans un HttpClient composant et l'a utilisé au lieu d'un module http. Voici mon HttpClient composant:

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { SpinnerService} from './spinner-service';

@Injectable()
export class HttpClient {
  constructor(
      private http: Http,
      public spinner: SpinnerService
    ){

  }

  createAuthorizationHeader(headers:Headers) {
    headers.append('Authorization', 'Basic ' + btoa('username:password')); 
  }

  get(url) {
    this.spinner.start();
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    return this.http.get(url, { headers: headers }).do(data=> {this.spinner.stop()});
  }

  post(url, data) {
    this.spinner.start();
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    return this.http.post(url, data, { headers: headers }).do(data=> {this.spinner.stop()});
  }
}

Peut-être vous créer un service sur mesure pour effectuer des requêtes http étendre la HttpClass fournis par l'angulaire et de suivre la isBusy état à votre service personnalisé lors de chaque demande .

OriginalL'auteur ozata | 2016-07-01

angular typescript

7

Utiliser un service qui est partagé entre Http (il y a des réponses déjà que diriez-emballage Http dans votre propre classe) et le <spinner-component>.
Voir aussi https://angular.io/docs/ts/latest/cookbook/component-communication.html

Dans le service partagé maintenir un compteur de démarrage (augmentation)/l'échec de requêtes HTTP et de notifier les <spinner-component> à chaque fois que le compteur de changements de 0 à >0 ou de >0 à 0 d'activer ou de désactiver lui-même.

Cela a été très utile de réponse pour moi Günter! Merci beaucoup! Je vais essayer de mon mieux et de voir si l'emballage Http permettra de résoudre le problème ou pas.
Merci encore Günter!
S'il vous plaît pouvez vous créer un exemple ?
Désolé, mais je n'ai pas assez de temps.

OriginalL'auteur Günter Zöchbauer

Merci pour votre réponse Günter Zöchbauer, Un exemple que j'ai construit en fonction de mes besoins. Je n'ai pas utiliser un gestionnaire HTTP, ce qui serait plus facile à utiliser, cependant, que cet exemple fonctionne avec de multiples services d'appels basé sur le comptoir de la suggestion. Espérons que cela aide quelqu'un 🙂

Créer le service de Chargeur.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()

export class LoaderService {
    public loaderCounter: BehaviorSubject<number> = new BehaviorSubject<number>(0);
    displayLoader(value: boolean) {
      let counter = value ? this.loaderCounter.value + 1 : this.loaderCounter.value - 1;
      this.loaderCounter.next(counter);
    }
}

Inclure ce service dans les fournisseurs de votre maain fichier de module
(Ex: AppModule)

Dans votre fichier de composant (Ex: AppComponent), abonnez-vous à la
des changements et de réfléchir à la chargeur (dans mon cas, c'est une autre
composant).

//Imports
import { Subscription } from 'rxjs/Subscription';
import { LoaderService } from './core/loader.service';
..
@Component({
  selector: 'my-app',
  template: `
    <div class="container-fluid content">
      <router-outlet></router-outlet>
    </div>
    <spinner [visible]="displayLoader"></spinner>
  `
})

export class AppComponent implements OnInit, OnDestroy {
    displayLoader: boolean;
    loaderSubscription: Subscription;
    constructor(private loaderService: LoaderService) {}

    ngOnInit() {
        this.loaderSubscription = this.loaderService.loaderCounter.subscribe((counter: number) => {
            this.displayLoader = counter != 0;
        });
    }

    ngOnDestroy() {
        this.loaderSubscription.unsubscribe();
    }
}

En utilisant le service de chargeur:

 import { LoaderService } from './core/loader.service';
    ..
    export class SampleComponent implements OnInit {
        constructor(private _service: SomeService, private loader: LoaderService) { }

    ngOnInit() {
        this.loader.displayLoader(true);
        this._service.getBalance().subscribe(
            response => ..do something..,
            () => .. error..,
            () => this.loader.displayLoader(false)
        );
    }
}

Très cool...mais pourquoi ton appel ajax à l'intérieur du composant? Je pense que vous devriez appeler le service de chargeur de méthode à l'intérieur d'un autre service où l'appel ajax est fait, non?
À partir de mes connaissances Angulaire 2, vous disposez d'un service, et il vous suffit d'appeler et de se lier au niveau des composants, pour les valeurs que vous avez. Je ne suis pas tout à fait sûr de savoir pourquoi vous avez besoin de plusieurs services que vous avez encore le besoin de se lier à la réponse du modèle et des variables à l'intérieur du composant.
mais le truc, c'est ici que nous but pleinement de chargement du chargeur à la composante où il manque d'originalité de la question.
D'accord, le code ci-dessus n'est pas pour chaque HttpRequest, pour ce faire, la création d'HttpWrapper, et appeler le service de chargeur de la HttpWrapper lui-même comme MadCatm2 souligné. Avec le posté le code qu'il donne plus de contrôle sur le moment de le montrer, dépend du cas d'utilisation nécessaires.

OriginalL'auteur Mark Cutajar

1

Juste pour le peuple qui est ici à partir de maintenant...

Avec cette solution, le compteur s'arrête pas en cas d'erreur de la requête http.
Assurez-vous de faire les suivants:
```
...
return this.http.post(url, data, { headers: headers })
  .do(data=> {this.spinner.stop()},
  err=> {this.spinner.stop());
...
```
OriginalL'auteur Gabriel
0

Vous pouvez également utiliser Pace.js

Serait assez facile d'ajouter
```
<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>
```
Vous pouvez trouver de la documentation ici: http://github.hubspot.com/pace/

OriginalL'auteur Jamie Rees

Vous devez vous connecter pour publier un commentaire.