如何在 Angular 中实现全局加载器

我有一个全局加载器，其实现如下：

核心模块：

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当导航到没有任何解析器的路线时

我在上面添加了一些日志NavigationStart and NavigationEnd事件，我发现NavigationEnd之后立即触发NavigationStart（这是正常的），而Overlay大约在0.5秒后消失。

我已阅读CHANGELOG.md但我没有发现任何可以解释这个问题的东西。欢迎任何想法。

Edit:

经过进一步研究，我通过设置恢复了以前的行为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问题 https://github.com/angular/material2/pull/10145。它修复了淡出动画Overlay.

获得所需行为的 v7.1+ 兼容方法是什么？ 根据我的说法，最好的办法是：仅在必要时显示加载程序，但是NavigationStart不包含所需的信息。 我想避免最终出现一些反跳行为。

这就是我在意识到之后得到的结果delay就用户体验而言，这是一个很好的解决方案，因为它允许加载程序仅在加载时间值得显示加载程序时才显示。

我不喜欢这个解决方案，因为我更喜欢将状态封装到Observable运算符而不是共享变量，但我无法实现它。

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();
});