Angular2作業インジケータ

Question

angular2で "ready"インジケータを使用することは可能ですか？私は何らかの角度の作業が競合状態を避けるために検出される必要があります。

は、ここで私は必要なものだがangularjs実装のために：

var el = document.querySelector('[ng-app], [data-ng-app]'); 
window.angularReady = false; 
if (angular.getTestability) { 
    angular.getTestability(el).whenStable(function() { 
     window.angularReady = true; 
    }); 
} else { 
    var $browser = angular.element(el).injector().get('$browser');   
    if ($browser.outstandingRequestCount > 0) { 
     window.angularReady = false; 
    } 
    $browser.notifyWhenNoOutstandingRequests(function() { 
     window.angularReady = true; 
    }); 
} 

https://github.com/wrozka/capybara-angular/blob/master/lib/capybara/angular/waiter.rb#L51-L61

Answer 1

あなたはHttpクラスを拡張して、この機能を実装することができます。

まずあなたが進行中の要求を監視するために、このクラスから使用できる監視サービスを作成します。

export class MonitoringService { 
    private outstandingRequestsNumber: int = 0; 
    private outstandingRequestsNumberObserver: Observer; 
    private outstandingRequestsNumberObservable: Observable; 

    constructor() { 
    this.outstandingRequestsNumberObservable = Observable.create((observer:Observer) => { 
     this.outstandingRequestsNumberObserver = observer; 
    }).share(); 
    } 

    getOutstandingRequests() { 
    return this.outstandingRequestsNumber; 
    } 

    incrementOutstandingRequests() { 
    this.outstandingRequestsNumber++; 
    } 

    decrementOutstandingRequests() { 
    this.outstandingRequestsNumber--; 
    if (this.outstandingRequestsNumber === 0) { 
     this.outstandingRequestsNumberObserver.next(); 
    } 
    } 

    notifyWhenNoOutstandingRequests(callback) { 
    this.outstandingRequestsNumberObservable.subscribe(callback); 
    } 
} 

は今CustomHttpクラスの実装：

@Injectable() 
export class CustomHttp extends Http { 
    constructor(backend: ConnectionBackend, 
       defaultOptions: RequestOptions, 
       private monitoring:MonitoringService) { 
    super(backend, defaultOptions); 
    } 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
    console.log('request...'); 
    this.monitoring.incrementOutstandingRequests(); 
    return super.request(url, options).finally(() => { 
     console.log('finally'); 
     this.monitoring.decrementOutstandingRequests(); 
    }); 
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    console.log('get...'); 
    this.monitoring.incrementOutstandingRequests(); 
    return super.get(url, options).finally(() => { 
     console.log('finally'); 
     this.monitoring.decrementOutstandingRequests(); 
    }); 
    } 

    (...) 
} 

最後のステップは、で構成されていアプリケーションのブートストラップ時に両方のクラスを登録する：

bootstrap(AppComponent, [HTTP_PROVIDERS, 
    MonitoringService, 
    provide(Http, { 
    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, monitory:MonitoringService) => new CustomHttp(backend, defaultOptions, monitory), 
    deps: [XHRBackend, RequestOptions, MonitoringService] 
    }) 
]); 

これを参照してくださいplunkr：https://plnkr.co/edit/lXn5vKY1K2A8RvSsJWm3?p=preview。

詳細については、この質問を参照してください：

• How to get all the pending http requests in javascript?

を