在浏览器上加载webpack块时显示进度条

时间:2017-03-08 06:04:46

标签: angular webpack progress-bar

我使用webpack开发了一个angular 2应用程序,我希望在浏览器上加载webpack块时显示进度条,向客户端展示一些正在进行中的事情。当我点击API获取GET / POST数据但是我没有加载通知知道浏览器加载应用程序块时如何显示加载栏。

1 个答案:

答案 0 :(得分:-1)

我在服务中使用了获取/发布api请求,并使用' Observable'来映射它。您必须在使用该特定服务的组件中订阅它。

您可以使用此处订阅进度条或任何文字'订阅'第三个参数的方法将在完成加载数据后执行。

您可以从以下代码获得帮助:

代替'正在加载......'您可以将进度条显示在代码中。

export class MyApp {

private data: Observable<Array<number>>;
private values: Array<number> = [];
private anyErrors: boolean;
private finished: String;


constructor() {
}

init() {
  this.finished = "Loading is in progress.....";
  this.data = new Observable(observer => {
      setTimeout(() => {
          observer.next(42);
      }, 1000);

      setTimeout(() => {
          observer.next(43);
      }, 2000);

      setTimeout(() => {
          observer.complete();
      }, 3000);
  });

  let subscription = this.data.subscribe(
      value => this.values.push(value),
      error => this.anyErrors = true,
      () => this.finished = "Loading completed!!"
  );
}

}

http://plnkr.co/edit/IFap1uTpXzyL453EqHum?p=preview