deaktivieren Tasten während Ajax-Anfragen

Question

ich viele Möglichkeiten, in jquery und Angular 1 auf, wie ein Submit-Button deaktivieren gesehen habe, während eine Ajax-Anforderung verarbeitet wird, aber nicht für Angular 2.

Bisher auf der Vorlage I hat:

<button type="submit" [disabled]="requestSent">Submit</button> 

und die folgende es ist deaktivierten Zustand im Typoskript zu wechseln:

requestSent: boolean = false; 

this.httpService.addNewAgent(object) 
      .subscribe(
      data => { 

       this.requestSent = false; 


      }, 
      error => { 

       console.log(error.error); 

      } 
      ); 

Aber das ist eher langatmig auf jeder einzelnen Komponente zu tun. Gibt es einen universelleren Umgang damit? Vielleicht mit Abfangjägern?

Answer 1

Danke @DmitriyKhirniy für die Antwort, aber ich wollte eine universelle Art der Deaktivierung von Schaltflächen während Ajax Anfragen. Ich habe einen Weg gefunden, Direktiven, Dienste und den Interceptor zu benutzen. Hoffentlich wird das jemandem helfen. Also müssen Sie immer nur das Attribut "disableDuringAjax" auf Ihre Schaltfläche (n) anwenden. siehe unten:

Vorlage:

<button type="submit" disableDuringAjax>Sign In</button> 

Richtlinie:

import { Directive, HostListener, HostBinding, ElementRef, Input } from '@angular/core'; 
import { BusyService } from '../busy.service'; 
import { Subscription } from 'rxjs/Subscription'; 

@Directive({ 
    selector: '[disableDuringAjax]' 
}) 

export class DisableButtonDuringAjax { 


    subscription: Subscription; 

    constructor(private _busyService: BusyService, private el: ElementRef) { 

     el.nativeElement.disabled = false; 

    } 


    ngOnInit() { 

     this.subscription = this._busyService.busy$ 
      .subscribe(
      response => { 




       if ((response == "busy")) { 
        this.el.nativeElement.disabled = true; 
        console.log("busy"); 
       } 

       if ((response == "not busy")) { 
        this.el.nativeElement.disabled = false; 
        console.log("not busy"); 
       } 


      } 
      ); 

    } 
    ngOnDestroy() { 
     // prevent memory leak when component is destroyed 
     this.subscription.unsubscribe(); 
    } 






} 

Service:

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

@Injectable() 
export class BusyService { 


    // Observable navItem source 
    private _busySource = new BehaviorSubject<string>(null); 
    // Observable navItem stream 
    busy$ = this._busySource.asObservable(); 

    constructor() { } 

    changeBusy(val) { 


     this._busySource.next(val); 


    } 
} 

Interceptor:

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable'; 
import { Injectable } from '@angular/core'; 
import 'rxjs/add/operator/do'; 
import { BusyService } from './busy.service'; 

@Injectable() 
export class ProgressInterceptor implements HttpInterceptor { 

    constructor(private busyService: BusyService) { } 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
     console.log(req); 
     return next.handle(req).do(
      event => { 
       console.log('Logging', event) 

       // If request was sent 
       if ((event.type == 0)) 
       { 
        console.log("busy"); 
        this.busyService.changeBusy("busy"); 
       } 
       else 
       { 
        this.busyService.changeBusy("not busy"); 
       } 

      } 
     ) 
    } 
} 

Answer 2

Es gibt mehrere Fälle, dieses Problem zu beheben: Erster Ansatz:

this.httpService.addNewAgent(object) 
     .do(() => this.isLoading = true) 
     .finally(() => this.isLoading = false) 
     .subscribe() 

Zweiter Ansatz ist die Schaffung Service mit Betreff:

@Injectable() 
class LoadingService { 
    isLoading: BehaviorSubject<boolean> = new BehaviourSubject(false); 
    } 

In Ihrem intenceptor Sie sometihn wie folgt festgelegt wird:

this.service.isLoading(currentState); 

In Ihrem Bauteil:

this.service.isLoading.subscribe((state) => this.isLoading = state)