Question

我在每个HTTP请求上都有一个加载栏。这对于耗时超过300毫秒左右的请求（例如，获取大量数据的API调用）非常有效，但是当请求短时看起来很傻，条形闪烁然后消失，这很分散注意力。

我试图弄清楚如何隐藏加载栏，除非返回所需的时间长于 n ms。

要控制加载栏，我在AppCompoent上有一个简单的方法

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  loading: boolean = true;

  constructor(private router: Router) {
    router.events.subscribe((routerEvent: Event) => {
      this.checkRouterEvent(routerEvent);
    });
  }

  checkRouterEvent(routerEvent: Event): void {
    if (routerEvent instanceof NavigationStart) {

       // sleep here for n ms perhaps?

      this.loading = true;
    }

    if (routerEvent instanceof NavigationEnd ||
      routerEvent instanceof NavigationCancel ||
      routerEvent instanceof NavigationError) {
      this.loading = false;
    }
  }
}

或者我已经完全错过了如何处理这种情况的标准模式？

Answer 1

您只需添加一个新变量即可说明“加载完成”状态。

这是一个解决方案：将finishedLoading: boolean = true;添加到您的班级。然后：

checkRouterEvent(routerEvent: Event): void {
  if (routerEvent instanceof NavigationStart) {
    this.finishedLoading = false;
    this.loading = false;
    setTimeout(() => {
      if (!this.finishedLoading) {
        this.loading = true;
      }
    } , 300);
  }

  if (routerEvent instanceof NavigationEnd ||
    routerEvent instanceof NavigationCancel ||
    routerEvent instanceof NavigationError) {
    this.finishedLoading = true;
    this.loading = false;
  }
}

如何只显示花费超过n的请求的加载栏

1 个答案: