Question

我有一些从外部模块加载的路由（登录，回调，未授权等），有时应用程序需要2到3秒才能导航到该路由。在等待路由到导航页面时，除顶部的导航栏外，屏幕为空白。我想在路由时添加加载消息。我通过订阅router.events可观察的方法找到了一种方法：

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)

说明：

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

Answer 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的结果来进行去抖的条件时间。

等待一段时间后，以角度显示路线加载动画

2 个答案: