Angular-Interceptor: Как управлять несколькими загрузчиками / прядильщиками на странице - PullRequest
Новая
       35

Angular-Interceptor: Как управлять несколькими загрузчиками / прядильщиками на странице

0 голосов
/ 27 ноября 2018

У нас есть приложение Angular6, где у нас есть разные компоненты на странице, и у каждого компонента есть <loader isLoading={loading} /> для отображения загрузчика при выполнении вызова API.Но этот процесс выполняется вручную, каждый компонент должен поддерживать флаг загрузки для этой цели.

Я хочу, чтобы перехватчик обрабатывал это.Я написал код, но он работает частично правильно.

Поведение приложения

enter image description here

С моимреализации, он продолжает показывать загрузчик, пока не завершится каждый вызов API.(Сохраняя количество вызовов API)

Так как мне показывать только те загрузчики, для которых вызов API еще не завершен, и скрывать те, для которых API завершен .

Реализация перехватчика 

export class HttpCommonInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.loader.start();
        this.loaderCount++;
        return next.handle(req).pipe(
            tap(event => {
                if (event instanceof HttpResponse) {
                    this.loaderCount--;
                    if (this.loaderCount === 0) {
                        this.loader.stop();
                    }
                    return of(event);
                }
            }),
            catchError(error => {
                this.loader.stop();
                this.loaderCount--;
                console.log('Error caught in interceptor ', error);
                return of(error);
            })
        );
    }
}
...