web-dev-qa-db-fra.com

Afficher la barre de chargement pour chaque requête http angular2

Je déplace mon application d'angularjs à angular2. J'utilisais Angular Loading Bar qui est 

Une barre de chargement automatique utilisant des intercepteurs angulaires. Ça marche automatiquement, il suffit donc de l’inclure en tant que dépendance et ce sera le cas afficher automatiquement la progression de vos requêtes $ http.

Plus d'informations

J'essaie de trouver un plugin similaire dans angular2. Je suis tombé sur quelques-uns comme ng2-slim-loading-bar mais ici je dois gérer manuellement les progrès. Pour chaque requête http, je dois démarrer manuellement la barre de progression, puis la terminer. 

Donc, existe-t-il un plugin disponible qui peut faire exactement ce que Angular Loading Bar fait dans angularjs. Ou comment puis-je modifier n'importe quel plugin existant pour se comporter de la sorte.

angularprogress-barloadingangular-http-interceptors
5
undefined

Vous pouvez utiliser ngx-progressbar . Il peut automatiquement afficher la barre de progression lorsqu'une requête HTTP est en cours d'exécution.

Tout ce que tu dois faire est : 

1- Importer et fournir NgProgressCustomBrowserXhr

import { NgProgressCustomBrowserXhr } from 'ngx-progressbar';

@NgModule({
 providers: [
   // ...
   { provide: BrowserXhr, useClass: NgProgressCustomBrowserXhr } ,
 ],
 imports: [
   // ...
   NgProgressModule
 ]
})

2- Utilisez-le comme ci-dessous dans votre modèle.

<ng-progress></ng-progress>

La progression commencera et se terminera automatiquement avec votre HTTP demandes. pas besoin d'utiliser NgProgressService pour appeler start ()/done () manuellement.

13
Radouane ROUFID

Voici ce que j'ai fait dans notre projet (Boîte à outils de migration automatisée Red Hat):

  • Dans notre wrapper de service HTTP (traitement de OAuth), nous déclenchons un événement,
  • qui est ensuite attrapé par notre LoadingIndicatorService.
  • LoadingIndicatorService
    • enveloppe la SlimLoaderBarService,
    • et garde une trace du nombre de requêtes HTTP en cours.
    • Ensuite, il compte le pourcentage et le situe à une échelle de 20 à 90%. 
    • Lorsque toutes les requêtes HTTP sont terminées, il reste à 90% environ une seconde, puis complete() est appelé.

Si vous avez plusieurs requêtes pour chaque étape de navigation, cela semble assez naturel et fournit un bon UX . Si vous n'avez généralement qu'une requête, alors vous voudrez peut-être ajuster l'animation basée sur CSS (la rendre plus longue) ou utiliser start() après tout.

Voici quelques éléments de code clés:

@Injectable()
export class LoadingIndicatorService {

    constructor(
        private _slimBarService: SlimLoadingBarService,
        private _eventBusService: EventBusService,
    ) {
        // Register the LoadingSomething event listeners.
        this._eventBusService.onEvent
            .filter(event => event.isTypeOf(LoadingSomethingStartedEvent))
            .subscribe((event: LoadingSomethingStartedEvent) => this.loadingStarted() )
        this._eventBusService.onEvent
            .filter(event => event.isTypeOf(LoadingSomethingFinishedEvent))
            .subscribe((event: LoadingSomethingFinishedEvent) => this.loadingFinished() )
    }

    public getSlimService(){
        return this._slimBarService;
    }


    private counter: number = 0;
    private max: number = void 0;

    private reset() {
        this.counter = 0;
        this.max = void 0;
    }

    public loadingStarted(){
        this.counter++;
        this.max = this.counter;
        this.updateProgress();
    }

    public loadingFinished(){
        this.counter--;
        this.updateProgress();
    }

    private updateProgress() {
        if (this.counter == 0) {
            this._slimBarService.height = "2px";
            this._slimBarService.visible = true;
            this._slimBarService.progress = 95;
            this.max = void 0;
            Observable.timer(700).subscribe(() => {
                this._slimBarService.complete();
            });
        }
        else {
            // max - counter = finished.
            // If the things to load are added after something loaded, the progress would go back.
            // But let's rely on that loading will start fast at the beginning.
            // Start at 20, jump to 90.
            let percent = 20 + 70 * (1 - (this.max - this.counter) / this.max);
            this._slimBarService.height = "3px";
            this._slimBarService.color = "#39a5dc";
            this._slimBarService.visible = true;
            this._slimBarService.progress = percent;
        }
    }

}


    let responseObservable2 = responseObservable.do(
        () => console.log("Request SUCCEEDED"),
        () => console.log("Request FAILED"),
        () => {
            console.log("Request FINISHED");
            if (this._eventBus) {
                console.log("Request FINISHED, firing");
                this._eventBus.fireEvent(new LoadingSomethingFinishedEvent(responseObservable))
            }
        }
    );

Enveloppe de service HTTP:

@Injectable()
export class WindupHttpService extends Http {

    private configureRequest(method: RequestMethod, f: Function, url: string | Request, options: RequestOptionsArgs = {}, body?: any): Observable<Response> {
        let responseObservable: Observable<Response> = ...

    ...

    console.log("Load STARTED");
    if (this._eventBus)
        console.log("Load STARTED, firing");
    this._eventBus.fireEvent(new LoadingSomethingStartedEvent(responseObservable));

    return responseObservable2;
}

Pour obtenir le code complet, recherchez le projet Windup sur github.com.

1
Ondra Žižka