Angular 处理hhtp post请求时显示加载条

嗨，我在我的Ionic 4中运行了以下方法 register.page.ts文件

 register(form) {
this.authService.register(form.value).subscribe(
  result => { // your result from observer.next() in auth.service
    // success
    this.router.navigateByUrl('login');
  },
  error => { // your error from observer.error() in auth.servi
    // no success
    alert('Error detected.');
  }
);
}

在我的 authService.ts文件

register(postData: User): Observable<any> {
return new Observable(observer => {
  this.http.post(`https://fb47b1a2.ngrok.io/register`, postData)
    .pipe(
      catchError(error => {
        return throwError(error); // if you catch any errors, pass them (rethrow) to the error block
      })
     )
     .subscribe(
       result => {
         observer.next(result); // if you receive a result, pass to register function in register.page.ts
         observer.complete(); // close the observable
       },
       error => {
         observer.error(error); // if you receive an error, pass error to register function
         observer.complete(); // close the observable
        }
      );
    });
}

寄存器（postData:User）：可观察{
返回新的可观察对象（观察者=>{
这是http.post(`https://fb47b1a2.ngrok.io/register`，postData）
.烟斗(
catchError（错误=>{
return throwError（error）；//如果捕获到任何错误，请将其传递（rethrow）到错误块
})
)
.订阅(
结果=>{
observer.next（result）；//如果收到一个结果，则传递给register.page.ts中的register函数
observer.complete（）；//关闭可观察对象
},
错误=>{
observer.error（error）；//如果收到错误，请将错误传递给register函数
observer.complete（）；//关闭可观察对象
}
);
});
}

---

这些方法工作得很好，但我希望有一个加载条，在HTTP请求发生时出现，然后在HTTP成功或返回错误时消失。我从未使用过ionic，也不知道将加载杆组件放置在何处以及如何构造它。任何帮助都将不胜感激。

您可以尝试使用角度材质：

此外，如果您不需要加载栏，您可以转到此页面并获取一些微调器的HTML和CSS

您需要将其作为组件添加到主html中

此外，本视频可能对您有所帮助：

视频中的要点：

1.制作微调器组件
2.将其添加到组件html（在其中触发http请求），并添加一个ngIf指令，其中一个变量初始化为 错。 3.当您触发http请求时，将ngIf更改为true，以便您可以看到它 4.当您得到响应时，将组件的ngIf更改为false

下面是一个简短的片段：

在您的ts中：

loader = false;

     register(form) {
this.loader = true;
    this.authService.register(form.value).subscribe(
      result => { // your result from observer.next() in auth.service
        // success
this.loader = false;
        this.router.navigateByUrl('login');
      },
      error => { // your error from observer.error() in auth.servi
        // no success
        alert('Error detected.');
      }
    );
    }

在html中

<loader *ngIf="loader"></loader>

---

您使用的是

爱奥尼亚4

，因此我想您将使用

爱奥尼亚的做事方式

，然后使用

加载控制器

-服务。 首先需要为显示或隐藏加载程序的逻辑编写两种方法，例如：

constructor() {
   ...
   private loaderController: LoadingController,
   ...
}

// To show the loader
async showLoader() {
   // You can put here some custom config, but don't add a duration, 
   // otherwise the loader will close prematurely 
   const loader = await this.loaderController.create({});
   await loader.present();
}

// To hide the loader
async hideLoader() {
   await this.loaderController.dismiss();
}
...

然后在调用observable之前，只需调用

this.showLoader（）

，然后在

subscribe

bloc中，

this.hideLoader（）

：

寄存器（表单）{
this.showLoader（）；{//您从auth.service中的observer.next（）获得的结果
//成功
this.hideLoader（）
//没有成功
this.hideLoader（）；
register(form) {
   this.showLoader(); <---- Show here, before the observable
   this.authService.register(form.value).subscribe(
      result => { // your result from observer.next() in auth.service
         // success
         this.hideLoader(); <---- Hide here, in the subscribe logic
         this.router.navigateByUrl('login');
      },
      error => { // your error from observer.error() in auth.servi
         // no success
         this.hideLoader(); <---- Hide here also, in the error-subscribe logic
         alert('Error detected.');
      }
   );
}