Question

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

我可以使用以上功能构建任何内置模块。或者给我任何方式，所以我可以使用角度函数。我正在使用rxjs http请求。

我不想使用jQuery或Javascript。

Answer 1

创建http拦截器并在其中调用您的常用函数。您可以编写自己的拦截器实现like this或使用an external library

Answer 2

扩展HTTP效果很好 - 在我们的项目中，我们还希望明确控制“＃loader”。某些场景也称为微调器。因此，我们的核心module中有一个 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调用进行多次HTTP调用。得到一些参考数据，然后我们希望微调器显示所有这些调用完成。所以我们用我们正在等待的动作调用spin函数

e.g。在消费部分中：

this.spinnerService.spin(
     Observable.forkJoin(
       this.refDataService.getRefDataList('statusTypes'),
       this.refDataService.getRefDataList('itemTypes')
     )
 ).subscribe(result => {
             this.statusTypes = result[0];
             this.itemTypes = result[1];
 });

Answer 3

@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){}
}

在角度为2

3 个答案: