Ну, чтобы это произошло, нужно сделать несколько вещей:
- сделать глобальный запрос инъекционным сервисом, который будет обслуживать ваши HTTP-запросы. добавьте туда счетчик (он будет увеличиваться с каждым запросом и уменьшаться после окончания)
Например:
@Injectable()
export class MyHTTPService {
public query(params: AjaxQueryClass) {
++this.requests_counter;
return this.http.post(this.serverURI, JSON.stringify(params), { withCredentials: true})
.toPromise()
.then(d => {
--this.requests_counter;
return d;
})
.catch(err => {
console.log(err);
return new EmptyObservable();
});
хорошо, вы можете использовать Observables, а не Promises, но идея должна быть ясной - каждый запрос увеличивает счетчик, и он будет отображаться на экране до завершения последнего запроса. Используйте этот сервис в каждом компоненте и выполняйте запросы к серверу только с ним.
- создайте прозрачное наложение с хорошей анимацией и поместите его в AppComponent (основной компонент) с помощью этого в шаблоне:
<div id="overlay" *ngIf="counter == 0"></div>
- В коде AppComponanet должно быть что-то вроде этого:
public counter = 0;
ngDoCheck() {
this.counter = this.my_http_service.requests_counter;
}
constructor(private my_http_service: MyHTTPService) {}
Как написать CSS для прозрачных оверлеев, вы найдете в Google. О том, как писать инъекционные препараты, вы можете узнать из учебника по Angular Hero.