Angular 带负载指示器的角2旋转变压器

我使用解析器将数据加载到组件中，但在数据未从服务器返回之前，组件不会加载。

---

我想知道是否有办法在服务器响应之前呈现负载指示器。

最简单的版本是ngIf语句

在根级别组件上的ngIf中包装图像

使用服务设置其是否可见

例如：

发送请求前：调用服务函数将变量设置为true

然后在加载的组件中，首先将该变量设置回false

您可以使用“对路由事件作出反应”策略来实现应用程序在任何路由事件发生时作出反应。为此，您需要在app.component.ts中输入一些代码，如：

import { Component } from '@angular/core';
import { Router, RouterEvent, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router';

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

  loading: boolean = true;

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

  checkRouterEvent(routerEvent: RouterEvent): void {
    if (routerEvent instanceof NavigationStart) {
      this.loading = true;
    }

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

在视图（html）中，类似于：

<div id="loader" class="myloader" *ngIf="loading">
  Loading...
</div>

加载。。。

您应该使用

它直接侦听您的Api调用

ngOnInit() {
        this.busy = this.http.get('...').subscribe();
    }

<div [ngBusy]="busy"></div>

ngOnInit（）{
this.busy=this.http.get（“…”）.subscribe（）；
}

---

这将显示微调器，直到您从服务器获得响应。

我提出的另一个解决方案是在您的解析器中使用

Observable

：

//data-resolver.service.ts
// ...
导出类DataResolverService实现解析{
// ...
解析（路由：ActivatedRouteSnapshot）：可观察{
返回（this.client.get（…）；
}
}

请注意，rxjs运算符用于从源代码

Observable

构建一个立即完成的

Observable

。现在，您可以轻松处理组件中的加载指示器：

导出类仪表板组件{
加载=真；
错误=错误；
数据$：可观察；
构造函数（私有activatedRoute:activatedRoute）{
this.data$=this.activatedRoute.data.pipe（switchMap（（data）=>data.data$）；
this.data$.subscribe（（）=>this.loading=false，（）=>this.error=true）；
}
}

---

请看我关于这方面的深入报道。这是一个来自我的排班应用程序的真实示例。

这对我来说非常有效。我在屏幕上已经显示的几个组件上使用了加载程序，但是我不知道如何在选项卡式/路由方法上进行加载，因为直到数据解析后选项卡才会显示。像这样使用应用程序中的代码组件为我解决了问题。：）最好的答案在这里。谢谢这是一个很好的解决方案，而不是试图用进度指示器包装rest请求，例如在解析器中。将使用ResolveStart和ResolveEnd事件，而不是使用ResolveStart和ResolveEnd事件。此外，如果解决失败，请确保处理取消事件。祝您好运，这根本不是问题的重点，问题与解析器中的繁忙有关，不在组件中。这很糟糕，如果要解析解析程序同步以发出可观察的，您也可以跳过解析程序，直接从组件调用服务。我之所以提出此建议，有一个很好的理由，我在我的故事中描述过：的

立即完成，因此可以很好地与路由器一起等待解析的
可观察的
完成（例如，远程呼叫等不会发生这种情况）。>路由器在解析数据并显示组件之前不会完成导航到路由。解析程序有一个非常特殊的用途，即延迟导航，直到预加载一些数据。如果解析程序立即完成并同步（如
的
），您实际上跳过了冲突解决程序，您所做的只是增加了冲突解决程序的开销，而不是在组件中使用普通服务。在您的示例中，您可以删除冲突解决程序，将构造函数中的第一行替换为
this.data$=this.client.get（…）
而且您的代码和开销也完全相同。感谢您的输入。解析程序和服务/组件之间的一些区别是：您可以可靠地访问（查询）解析程序中的参数，而在组件（因此在服务中）中，您必须订阅路由，并且可能会变为空（查询）以可观察形式的参数。在所需的可观察完成之前，解析程序会使您的应用程序处于非活动状态。解析程序可以跨组件以更声明的方式重用。解析程序有明确的责任解析数据（不提供或显示数据）。我的示例在这里可能有点简单。