web-dev-qa-db-de.com

Ladebalken für jede http-Anfrage "angle2" anzeigen

Ich verschiebe meine App von anglejs nach angle2. Ich habe Angular Loading Bar verwendet 

Eine automatische Ladestange mit Winkelabfangern. Es funktioniert automatisch . Fügen Sie es einfach als Abhängigkeit hinzu und Zeigt automatisch den Fortschritt Ihrer $ http-Anfragen an.

Mehr Info

Ich versuche, ein ähnliches Plugin in angle2 zu finden. Ich habe einige wie ng2-slim-loading-bar gefunden, aber hier muss ich den Fortschritt manuell verwalten. Für jede http-Anfrage muss ich den Fortschrittsbalken manuell starten und dann beenden. 

Gibt es ein vorhandenes Plugin, das genau das tun kann, was Angular Loading Bar in anglejs macht? Oder wie kann ich ein vorhandenes Plugin so ändern, dass es sich so verhält.

5
undefined

Sie können ngx-progressbar verwenden. Es kann automatisch den Fortschrittsbalken anzeigen, während eine HTTP-Anforderung ausgeführt wird.

Alles was du tun musst, ist : 

1- Importieren und Bereitstellen von NgProgressCustomBrowserXhr

import { NgProgressCustomBrowserXhr } from 'ngx-progressbar';

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

2- Verwenden Sie es wie unten in Ihrer Vorlage.

<ng-progress></ng-progress>

Der Fortschritt wird automatisch mit Ihren HTTP-Anforderungen (.____.) Gestartet und abgeschlossen. Sie brauchen NgProgressService nicht, um start ()/done () manuell aufzurufen.

13
Radouane ROUFID

Folgendes habe ich in unserem Projekt gemacht (Red Hat Automated Migration Toolkit):

  • In unserem HTTP-Service-Wrapper (Umgang mit OAuth) lösen wir ein Ereignis aus.
  • das wird dann von unserem LoadingIndicatorService erwischt.
  • LoadingIndicatorService
    • umwickelt die SlimLoaderBarService,
    • und verfolgt, wie viele HTTP-Anforderungen gerade ausgeführt werden.
    • Dann zählt er den Prozentsatz und stellt ihn auf eine Skala von 20 bis 90% ein. 
    • Wenn alle HTTP-Anforderungen abgeschlossen sind, bleiben sie etwa eine Sekunde lang bei 90%. Anschließend wird complete() aufgerufen.

Wenn Sie mehrere Anforderungen für jeden Navigationsschritt haben, sieht dies ganz natürlich aus und stellt eine gute UX dar. Wenn Sie normalerweise nur eine Anforderung haben, möchten Sie entweder die CSS-basierte Animation anpassen (länger machen) oder benutze danach start().

Hier einige Schlüsselcodeteile:

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

HTTP-Service-Wrapper:

@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;
}

Den vollständigen Code finden Sie auf github.com nach dem Projekt Windup.

1
Ondra Žižka