如何在Angular 7.1中实现全局加载程序

我有一个全局加载程序,其实现方式如下:
CoreModule:

router.events.pipe(
  filter(x => x instanceof NavigationStart)
).subscribe(() => loaderService.show());

router.events.pipe(
  filter(x => x instanceof NavigationEnd || x instanceof NavigationCancel || x instanceof NavigationError)
).subscribe(() => loaderService.hide());

加载服务:
@Injectable({
    providedIn: 'root'
})
export class LoaderService {

    overlayRef: OverlayRef;
    componentFactory: ComponentFactory<LoaderComponent>;
    componentPortal: ComponentPortal<LoaderComponent>;
    componentRef: ComponentRef<LoaderComponent>;

    constructor(
        private overlay: Overlay,
        private componentFactoryResolver: ComponentFactoryResolver
    ) {
        this.overlayRef = this.overlay.create(
            {
                hasBackdrop: true,
                positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
            }
        );

        this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(LoaderComponent);

        this.componentPortal = new ComponentPortal(this.componentFactory.componentType);
    }

    show(message?: string) {
        this.componentRef = this.overlayRef.attach<LoaderComponent>(this.componentPortal);
        this.componentRef.instance.message = message;
    }

    hide() {
        this.overlayRef.detach();
    }
}

当使用Angular 7.0.2运行时,行为(我想要的)是:
在解析附加到路由的数据和加载惰性模块时显示加载程序
导航到没有解析程序的路由时不显示加载程序
我已经更新到Angular 7.2,现在的行为是:
在解析附加到路由的数据和加载惰性模块时显示加载程序
当导航到没有任何解析器的路由时,显示不带LoaderComponent的覆盖
我在NavigationStartNavigationEnd事件上添加了一些日志,发现NavigationEndNavigationStart之后立即触发(这是正常的),而overlay在大约0.5s之后消失。
我已经阅读了CHANGELOG.md但是我没有发现任何可以解释这个问题的东西。任何想法都是受欢迎的。
编辑:
经过进一步的研究,我通过设置如下package.json恢复了先前的行为:
"@angular/cdk": "~7.0.0",
"@angular/material": "~7.0.0",

而不是这个:
"@angular/cdk": "~7.2.0",
"@angular/material": "~7.2.0",

我已经确定了7.1.0版中发布的错误提交,并在相关的GitHub issue上发布了我的问题。它修复了Overlay的淡出动画。
什么是v7.1+兼容的方式来获得期望的行为?
在我看来,最好的做法是:只在必要时显示加载程序,但NavigationStart不包含所需的信息。
我想避免以一些放松的行为结束。


最佳答案:

在意识到adebounceTime在用户体验方面是一个很好的解决方案之后,我最终得到了这样的结果,因为它只允许加载程序在加载时间值得显示加载程序时才显示。

counter = 0;

router.events.pipe(
  filter(x => x instanceof NavigationStart),
  debounceTime(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();
});

评论