时间戳

首页 > 解决方案 > 等待一段时间后在 Angular 中显示路线加载动画

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

问题描述

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

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运算符可能会起作用，但我并不完全确定。有没有人有任何想法？

标签： angularrxjs

解决方案

我认为你可以这样做：

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

解释：

  1. 只使用NavigationStartand NavigationEnd（你也可以添加NavigationCancel）
  2. Debounce 事件（如果在 debounce 结束之前发出，则不考虑）
  3. 动态设置值（最后一次调用将始终是 NavigationEnd 或 NavigationCancel），因此它将以false值结束

推荐阅读