如何在Angular 7.1中实现全局加载程序 [英] How to implement a global loader in Angular 7.1

问题描述

我有一个像这样实现的全局加载器:

I have a global loader which is implemented like this:

CoreModule:

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

LoaderService:

LoaderService:

@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运行时，行为(我想要的)是:

When running with Angular 7.0.2, the behavior (which I wanted) was:

• 在解析附加到路线的数据以及加载惰性模块时显示加载程序
• 导航到没有任何解析器的路线时不显示加载器

我已经更新到Angular 7.2，现在的行为是:

I have updated to Angular 7.2, now the behavior is:

• 在解析附加到路线的数据以及加载惰性模块时显示加载程序
导航到没有任何解析器的路线时，
• 在没有LoaderComponent的情况下显示叠加层

• Show loader while resolving data attached to a route, and while loading a lazy module
• Show the Overlay whithout the LoaderComponent when navigating to a route without any resolver

我在NavigationStart和NavigationEnd事件上添加了一些日志，我发现NavigationEnd在NavigationStart之后立即触发(这是正常现象)，而覆盖"在此后约0.5s消失.

I have added some logs on the NavigationStart and NavigationEnd events and I found that NavigationEnd is triggered immediately after NavigationStart (which is normal), while Overlay disappears about 0.5s after.

我已经阅读了CHANGELOG.md，但是没有发现任何可以解释此问题的信息.任何想法都欢迎.

I have read the CHANGELOG.md but I found nothing that might explain this problem. Any idea is welcome.

经过进一步研究，我通过设置package.json来恢复以前的行为:

After further research, I have restored the previous behavior by setting package.json like this:

"@angular/cdk": "~7.0.0",
"@angular/material": "~7.0.0",

代替此:

"@angular/cdk": "~7.2.0",
"@angular/material": "~7.2.0",

我已经确定在7.1.0版本中发布的错误提交，并将问题发布在相关的

I have identified the faulty commit which has been released in version 7.1.0 and I posted my problem on the related GitHub issue. It fixes the fade out animation of the Overlay.

什么是符合v7.1 +的方式才能获得所需的行为? 据我说，最好的办法是:仅在必要时显示加载程序，但NavigationStart不会保存所需的信息. 我想避免最终出现一些反跳行为.

What is the v7.1+ compliant way to get the desired behavior? According to me, the best thing to do would be: show the loader only when necessary, but NavigationStart doesn't hold the needed information. I'd like to avoid ending up with some debounce behavior.

推荐答案

在意识到delay是UX方面的一个很好的解决方案之后，我最终想到了这里，因为它允许加载程序仅在加载时间值得展示一个加载器.

Here is what I ended up with, after realizing that a delay was a good solution in terms of UX because it allowed the loader to show only when the loading time is worth displaying a loader.

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

这篇关于如何在Angular 7.1中实现全局加载程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！