Показывать анимацию загрузки маршрута в угловых после периода ожидания

Question

У меня есть несколько маршрутов, которые загружаются из внешнего модуля (вход в систему, обратный вызов, несанкционированный доступ и т. Д.), И иногда приложению требуется 2-3 секунды, чтобы перейти к маршруту.Пока он ожидает маршрутизации на страницу навигации, экран пуст, за исключением навигационной панели вверху.Я хотел бы добавить сообщение о загрузке во время маршрутизации.Я нашел способ, подписавшись на router.events Observable:

ngAfterViewInit() {
    this._router.events.subscribe(event => {
        if (event instanceof NavigationStart) {
            this.routeLoading = true;
        } else if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
            this.routeLoading = false;
        }
    });
}

Но на самом деле я хотел бы сделать это, только если навигация занимает, например, более полсекунды.Многие маршруты, после того как мы вошли в систему, в основном мгновенные, и в этих случаях я не хочу, чтобы загрузчик мигал на экране.

Есть ли способ сделать это?Я думаю, что-то вроде использования оператора pipe, и оператор debounceTime может работать, но я не совсем уверен.У кого-нибудь есть идеи?

Answer 1

Я думаю, вы можете сделать что-то вроде этого:

this.router.events.pipe(
  filter(event => event instanceof NavigationStart || event instanceof NavigationEnd),
  debounceTime(500)
).subscribe(event => this.routeLoading = event instanceof NavigationStart)

Пояснение:

1. Используйте только NavigationStart и NavigationEnd (вы также можете добавить NavigationCancel)
2. События отказов (если они были выпущены до окончания отказов, они не будут приняты во внимание)
3. Установить значение динамически (последним вызовом всегда будет NavigationEnd или NavigationCancel), поэтому оно заканчивается false значением

Answer 2

Я использовал ответ @ Gilsdav для начала, и он отлично работает.Я сделал небольшое изменение, так что время отката происходит только на NavigationStart.Таким образом, загрузчик немедленно отключается на NavigationEnd, но запускается после времени ожидания 500 миллисекунд на NavigationStart.Вот как это сделать:

this._router.events
    .pipe(
        filter(event => event instanceof NavigationStart || event instanceof NavigationEnd),
        debounce(event => (event instanceof NavigationStart ? timer(500) : EMPTY)),
    )
    .subscribe(event => {
        this.routeLoading = event instanceof NavigationStart;
    });

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