2

我需要在整个angular2项目中设置通用加载器。所以我只想做的是当我的新http调用生成它是 GET、POST 或 PUT 时，然后在请求发送加载程序出现之前。一旦http响应（成功或错误）从服务器端到达，则加载程序应该消失。

有任何可用的内置模块可以使用我可以执行上述功能。或者给我任何方式，以便我可以使用角度函数来完成。我正在使用rxjs请求http。

我不想使用 jQuery 或 Javascript。

4

3 回答 3

2

扩展 HTTP 效果很好——在我们的项目中，我们还希望在某些场景中显式控制“加载器”，也就是微调器。所以我们的核心模块中有一个SpinnerService可供所有组件使用。

@Injectable()
export class SpinnerService {

  private spinnerStateSource = new Subject<SpinnerState>();
  spinnerState$ = this.spinnerStateSource.asObservable();

  private defaultMessage: string = 'Loading...';

  show(message?: string) {

    let msg = this.defaultMessage as string;
    if (message) {
      msg = message;
    }

    this.spinnerStateSource.next({ showing: true, message: msg });
  }

  hide() {
    this.spinnerStateSource.next({ showing: false, message: '' });
  }

  spin(obs: Observable<any>, message?: string): Observable<any> {
    this.show(message);
    return obs.finally(() => this.hide());
  }

}

class SpinnerState {
  showing: boolean;
  message: string;
}

主模块中的组件订阅服务以显示/隐藏实际的微调器 UI（编辑：就像在@Gunter 的回答中一样），其他组件可以（通过服务）告诉微调器显示/隐藏。

我们使用的一个示例是，如果一个组件必须进行多次 HTTP 调用以获取一些参考数据，那么我们希望微调器显示直到所有这些调用完成。所以我们spin用我们正在等待的动作调用函数

例如在消费组件中：

this.spinnerService.spin(
     Observable.forkJoin(
       this.refDataService.getRefDataList('statusTypes'),
       this.refDataService.getRefDataList('itemTypes')
     )
 ).subscribe(result => {
             this.statusTypes = result[0];
             this.itemTypes = result[1];
 });
于 2017-02-06T07:23:05.963 回答
2

创建 http 拦截器并在其中调用您的常用函数。您可以像这样编写自己的拦截器实现，也可以使用外部库

于 2017-02-06T06:53:36.890 回答
1 
@Injectable()
class MyService {
  private change:Subject<boolean> = new BehaviorSubject(false);
  public change$ = this.change.asObservable();

  constructor(private http:Http) {}

  get(...) {
    this.change.next(true)
    return this.http.get( ... )
    .map( ... )
    .finally(_ => this.change.next(false);
  }
}

@Component({
  selector: 'loader',
  template: `
  <div *ngIf="myService.change | async">is loading ...</div>
`
)}
class LoaderComponent {
  constructor(public myService:MyService){}
}
于 2017-02-06T07:13:11.693 回答