[英]Angular2 working indicator
是否可以在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
您可以通過擴展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。
有關詳細信息,請參閱此問題:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.