Question

我使用解析器将数据加载到组件中，但是直到没有从服务器返回数据，组件才会加载。我想知道是否有办法在服务器响应之前呈现负载指示符。

Answer 1

您可以使用“响应路由事件”策略来实现App，以便在发生任何路由事件时做出反应。为此，您需要在app.component.ts中使用以下代码：

import { Component } from '@angular/core';
import { Router, Event, 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: Event) => {
      this.checkRouterEvent(routerEvent);
    });
  }

  checkRouterEvent(routerEvent: Event): 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>

Answer 2

我想到的另一种解决方案是在解析器中使用Observable<Observable<...>>：

// data-resolver.service.ts

// ...

export class DataResolverService implements Resolve<Observable<Data>> {

// ...

  resolve(route: ActivatedRouteSnapshot): Observable<Observable<Data>> {
    return of(this.client.get(...));
  }
}

请注意使用 rxjs 的of运算符从源Observable构造立即完成的Observable。现在，您可以轻松地在组件中处理加载指示器：

export class DashboardComponent {
  loading = true;
  error = false;

  data$: Observable<Data>;

  constructor(private activatedRoute: ActivatedRoute) {
    this.data$ = this.activatedRoute.data.pipe(switchMap((data) => data.data$));
    this.data$.subscribe(() => this.loading = false, () => this.error = true);
  }
}

请参阅我对此here的深入报道。这是来自我的排班应用程序tift的真实示例。

Answer 3

最简单的版本将是ngIf语句

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

使用服务来设置它是否可见。

例如：

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

然后在加载的组件中，首先要做的是将该变量设置为false

Answer 4

你应该使用 https://www.npmjs.com/package/angular2-busy

直接听你的Api电话

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

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

这将显示微调器，直到您收到服务器的响应。

Angular 2旋转变压器带有加载指示器

4 个答案: