等待一段时间后在 Angular 中显示路线加载动画答案

【问题标题】：Show Route Loading Animation in Angular After a Waiting Period等待一段时间后在 Angular 中显示路线加载动画
【发布时间】：2019-06-08 04:34:24
【问题描述】：

我有一些从外部模块加载的路由（登录、回调、未经授权等），有时应用程序需要 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 运算符可能会起作用，但我并不完全确定。有人有什么想法吗？

【问题讨论】：

思路不错，但是如果不知道之前导航结束的时间，怎么选择设置routeLoading呢？加载器/微调器上的动画可能会缓慢淡入，所以如果加载速度很快，在它被移除之前我几乎看不到（淡出）

标签： angular rxjs

【解决方案1】：

我认为你可以这样做：

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

解释：

只能使用NavigationStart和NavigationEnd（你也可以加NavigationCancel）
去抖动事件（如果在去抖动结束之前发出，则不会考虑）
动态设置值（最后一次调用将始终为 NavigationEnd 或 NavigationCancel），因此将以 false 值结束

【讨论】：

【解决方案2】：

我使用@Gilsdav 的答案开始，它运行良好。我做了一个小改动，使去抖时间只发生在NavigationStart。这样，加载程序在NavigationEnd 上立即消失，但在NavigationStart 上的 500 毫秒等待时间后启动。这样做的方法如下：

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，但使用它让我可以选择根据instanceof 和event 结果为去抖设置条件时间。

【讨论】：