Я хочу показать загрузчик при любом триггере HTTP-запроса и скрыть, когда все HTTP-запросы будут выполнены.
Я новичок в angular, и я не могу найти способ его реализовать.
Помогите пожалуйста мне!
Я хочу показать загрузчик при любом триггере HTTP-запроса и скрыть, когда все HTTP-запросы будут выполнены.
Я новичок в angular, и я не могу найти способ его реализовать.
Помогите пожалуйста мне!
Это зависит от типа "загрузчика", который вы хотите сделать. Если вы реализуете HTTP-запросы с помощью Observables, вы можете подписаться, чтобы дождаться результата, в том же блоке — вы можете открыть модальное окно (индикатор загрузки) или обновить индикатор выполнения. После этого с помощью оператора .then() - закрыть модальное окно или поставить прогресс на 100% завершение.
Все зависит от вас и вашего видения.
Документация: Angular Observables
В то же время есть много похожих вопросов уже с некоторым кодом и прогрессом:
Ну, чтобы это произошло, вам нужно сделать несколько вещей:
Например:
@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, но идея должна быть ясна - каждый запрос увеличивает счетчик, и он будет оставаться на экране, пока не завершится последний запрос. Используйте этот сервис в каждом компоненте и выполняйте серверные запросы только с ним.
<div id="overlay" *ngIf="counter == 0"></div>
public counter = 0;
ngDoCheck() {
this.counter = this.my_http_service.requests_counter;
}
constructor(private my_http_service: MyHTTPService) {}
Как написать CSS для прозрачных оверлеев, вы найдете в гугле. Как писать инжекты, вы можете найти в учебнике по Angular Hero.