2016-03-24 13 views
3

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

は、ここで私は必要なものだが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

答えて

3

あなたは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

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

関連する問題