[英]Angular2 working indicator
Is it possible to do the "ready" indicator in angular2. 是否可以在angular2中执行“就绪”指示器。 I need to detect somehow is angular working or not to avoid race conditions. 我需要以某种方式检测角度是否工作以避免竞争条件。
Here's what I need but for angularjs implementation: 这是我需要的但是对于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 https://github.com/wrozka/capybara-angular/blob/master/lib/capybara/angular/waiter.rb#L51-L61
You could implement this feature by extending the Http
class. 您可以通过扩展Http
类来实现此功能。
First create a monitoring service that you can use from this class to monitor in-progress requests: 首先创建一个监视服务,您可以在此类中使用该服务来监视正在进行的请求:
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);
}
}
Now the implementation of the CustomHttp
class: 现在执行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();
});
}
(...)
}
The last step consists of registering both classes when bootstrapping the application: 最后一步是在引导应用程序时注册两个类:
bootstrap(AppComponent, [HTTP_PROVIDERS,
MonitoringService,
provide(Http, {
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, monitory:MonitoringService) => new CustomHttp(backend, defaultOptions, monitory),
deps: [XHRBackend, RequestOptions, MonitoringService]
})
]);
See this plunkr: https://plnkr.co/edit/lXn5vKY1K2A8RvSsJWm3?p=preview . 请参阅此plunkr: https ://plnkr.co/edit/lXn5vKY1K2A8RvSsJWm3 ? p = preview。
See this question for more details: 有关详细信息,请参阅此问题:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.