Как реализовать глобальный загрузчик в Angular

Вот к чему я пришел после того, как понял, что delay был хорошим решением с точки зрения UX, потому что он позволял показывать загрузчику только тогда, когда время загрузки стоит отображать загрузчика.

Мне не нравится это решение, потому что оно подразумевает совместное использование состояния между двумя Observables, когда Observables — это чистые каналы, а не побочные эффекты и общие состояния.

counter = 0;

router.events.pipe(
  filter(x => x instanceof NavigationStart),
  delay(200),
).subscribe(() => {
  /*
  If this condition is true, then the event corresponding to the end of this NavigationStart
  has not passed yet so we show the loader
  */
  if (this.counter === 0) {
    loaderService.show();
  }
  this.counter++;
});

router.events.pipe(
  filter(x => x instanceof NavigationEnd || x instanceof NavigationCancel || x instanceof NavigationError)
).subscribe(() => {
  this.counter--;
  loaderService.hide();
});

То, как мы реализуем загрузчик в нашей системе со списком исключений:

export class LoaderInterceptor implements HttpInterceptor {
  requestCount = 0;

  constructor(private loaderService: LoaderService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    if (!(REQUEST_LOADER_EXCEPTIONS.find(r => request.url.includes(r)))) {
      this.loaderService.setLoading(true);
      this.requestCount++;
    }

    return next.handle(request).pipe(
      tap(res => {
        if (res instanceof HttpResponse) {
          if (!(REQUEST_LOADER_EXCEPTIONS.find(r => request.url.includes(r)))) {
            this.requestCount--;
          }
          if (this.requestCount <= 0) {
            this.loaderService.setLoading(false);
          }
        }
      }),
      catchError(err => {
        this.loaderService.setLoading(false);
        this.requestCount = 0;
        throw err;
      })
    );
  }
}

и служба загрузчика просто (задержка 300 мс не позволяет загрузчику просто мигать на экране, когда ответ быстрый):

export class LoaderService {
  loadingRequest = new BehaviorSubject(false);
  private timeout: any;

  setLoading(val: boolean): void {
    if (!val) {
      this.timeout = setTimeout(() => {
        this.loadingRequest.next(val);
      }, 300);
    } else {
      clearTimeout(this.timeout);
      this.loadingRequest.next(val);
    }
  }
}

Пытаясь улучшить идею @Guerric P, я полагаю, если бы вы определили наблюдаемую, например:

  loading$ = this.router.events.pipe(
    filter(
      x =>
        x instanceof NavigationStart ||
        x instanceof NavigationEnd ||
        x instanceof NavigationCancel ||
        x instanceof NavigationError
    ),
    map(x => (x instanceof NavigationStart ? true : false)),
    debounceTime(200),
    tap(x => console.log(x))
  );

И у тебя есть

<div *ngIf="loading$|async">Loadding....</div>

Вы должны увидеть загрузку... когда начинаете навигацию и не видите, значит все загружено.

Это может быть в компоненте, а этот компонент в main-app.component, нет необходимости в службе или Factory в этот стек если вы удалите debounce, вы увидите true,false в консоли ПРИМЕЧАНИЕ. Вы можете удалить оператор tap, это только для проверки

Обновление, заставляющее один и тот же загрузчик работать при загрузке данных из службы.

Представьте, что у нас есть сервис с загрузкой свойства, которое было субъектом.

@Injectable({
  providedIn: 'root',
})
export class DataService {
    loading:Subject<boolean>=new Subject<boolean>();
    ...
}

Мы можем объединить ранее наблюдаемое и это, поэтому наша загрузка $ в app.component становится

  loading$ = merge(this.dataService.loading.pipe(startWith(false)),
    this.router.events.pipe(
    filter(
      x =>
        x instanceof NavigationStart ||
        x instanceof NavigationEnd ||
        x instanceof NavigationCancel ||
        x instanceof NavigationError
    ),
    map(x => (x instanceof NavigationStart ? true : false))
  )).pipe(
    debounceTime(200),
    tap(x => console.log(x))
  );

Итак, мы можем сделать, например.

this.dataService.loading.next(true)
this.dataService.getData(time).subscribe(res=>{
  this.dataService.loading.next(false)
  this.response=res;
})

ПРИМЕЧАНИЕ. Вы можете проверить stackblitz, однокомпонентный не задерживает, поэтому загрузка не отображается, двухкомпонентный, задерживает, потому что CanActivate Guard и потому что вызывает службу в ngOnInit

ПРИМЕЧАНИЕ 2. В этом примере мы вручную вызываем this.dataService.loading.next(true|false). Мы можем улучшить его, создав оператор

Последнее обновление моего комментария всегда ждет 200 миллисекунд. Конечно, мы не хотим ждать в конце навигации или в конце наблюдаемого. Таким образом, мы можем заменить debounceTime(200) на что-то вроде debounce(x => x ? timer(200) : EMPTY), но это приведет к тому, что в ngOnInit у нас есть компонент с задержкой поиска, щелчком загрузчика.

Поэтому я решил использовать данные в маршрутизаторе, чтобы указать, какие компоненты имеют ngOnInit.

Представьте себе что-нибудь вроде

const routes: Routes = [
  { path: 'one-component', component: OneComponent },
  { path: 'two-component', component: TwoComponent,
               canActivate:[FoolGuard],data:{initLoader:true}},
    { path: 'three-component', component: ThreeComponent,
               canActivate:[FoolGuard],data:{initLoader:true} },
  ];

Я создаю службу, которая учитывает, когда маршрутизатор имеет данные initLoader, и включаю нулевой оператор

/*Nils' operator: https://nils-mehlhorn.de/posts/indicating-loading-the-right-way-in-angular
*/
export function prepare<T>(callback: () => void): (source: Observable<T>) => Observable<T> {
  return (source: Observable<T>): Observable<T> => defer(() => {
    callback();
    return source;
  });
}
export function indicate<T>(indicator: Subject<boolean>): (source: Observable<T>) => Observable<T> {
  return (source: Observable<T>): Observable<T> => source.pipe(
    prepare(() => indicator.next(true)),
    finalize(() => indicator.next(false))
  )
}

Оператор Нильса работает так, что если у вас есть субъект и наблюдаемое

  myObservable.pipe(indicate(mySubject)).subscribe(res=>..)

отправьте истину субъекту в начале звонка и ложь и конец звонка

Ну, я могу сделать такую ​​услугу, как

/*Service*/
@Injectable({
  providedIn: "root"
})
export class DataService {
  loading: Subject<boolean> = new Subject<boolean>();
  constructor(private router: Router){}

  //I use the Nils' operator
  getData(time: number) {
    return of(new Date()).pipe(delay(time),indicate(this.loading));
  }

  getLoading(): Observable<any> {
    let wait=true;
    return merge(
      this.loading.pipe(map(x=>{
        wait=x
        return x
        })),
      this.router.events
        .pipe(
          filter(
            x =>
              x instanceof NavigationStart ||
              x instanceof ActivationEnd ||
              x instanceof NavigationCancel ||
              x instanceof NavigationError || 
              x instanceof NavigationEnd
          ),
          map(x => {
            if (x instanceof ActivationEnd) {
              wait=x.snapshot.data.wait|| false;
              return true;
            }
            return x instanceof NavigationStart ? true : false;
          })
        ))
        .pipe(
          debounce(x=>wait || x?timer(200):EMPTY),
        )
  }

Это приводит к тому, что задержка происходит, когда StartNavigation или путь имеет в данных ожидание: true. См. в stackblitz этот компонент -three имеет в пути data:{wait:true} (возможно, мы забыли удалить его), но не имеет ngOnInit. Это делает, что у нас есть задержка

ПРИМЕЧАНИЕ: другой сервис может использовать загрузчик, только внедрить dataService и использовать оператор nils.

this.anotherService.getData().pipe(
   indicate(this.dataService.loading)
).subscribe(res=>{....})