Как скрыть загрузчик для всех HTTP-запросов, выполненных в angular 4/6/7?

Я хочу показать загрузчик при любом триггере HTTP-запроса и скрыть, когда все HTTP-запросы будут выполнены.

Я новичок в angular, и я не могу найти способ его реализовать.

Помогите пожалуйста мне!


person Ambuj Khanna    schedule 25.04.2019    source источник


Ответы (2)


Это зависит от типа "загрузчика", который вы хотите сделать. Если вы реализуете HTTP-запросы с помощью Observables, вы можете подписаться, чтобы дождаться результата, в том же блоке — вы можете открыть модальное окно (индикатор загрузки) или обновить индикатор выполнения. После этого с помощью оператора .then() - закрыть модальное окно или поставить прогресс на 100% завершение.

Все зависит от вас и вашего видения.

Документация: Angular Observables

В то же время есть много похожих вопросов уже с некоторым кодом и прогрессом:

person Eugene    schedule 25.04.2019

Ну, чтобы это произошло, вам нужно сделать несколько вещей:

  1. сделать сервис глобальных запросов, который будет обслуживать ваши 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, но идея должна быть ясна - каждый запрос увеличивает счетчик, и он будет оставаться на экране, пока не завершится последний запрос. Используйте этот сервис в каждом компоненте и выполняйте серверные запросы только с ним.

  1. сделайте прозрачный оверлей с красивой анимацией и поместите его в AppComponent (основной компонент) с этим в шаблоне:

<div id="overlay" *ngIf="counter == 0"></div>

  1. В коде AppComponanet должно быть что-то вроде этого:

    public counter = 0;
    ngDoCheck() {
       this.counter = this.my_http_service.requests_counter;
    }
    constructor(private my_http_service: MyHTTPService) {}

Как написать CSS для прозрачных оверлеев, вы найдете в гугле. Как писать инжекты, вы можете найти в учебнике по Angular Hero.

person Roberc    schedule 25.04.2019