在处理 hhtp post 请求时显示加载栏

Question

您好，我的 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
        }
      );
    });
}

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

Answer 1

你可以试试这个 angular material:

https://material.angular.io/components/progress-bar/overview

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

https://tobiasahlin.com/spinkit/

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

此外，此视频可能对您有所帮助： https://www.youtube.com/watch?v=qR-Cj1dGgkM

视频中的重点：

1.Make 微调器组件
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>

Answer 2

您正在使用 Ionic 4，所以我想您将使用 ionic way of doing things，然后使用 LoadingController-服务。你首先需要写两个方法来显示或隐藏loader的逻辑，如：


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();
}
...

然后在调用您的可观察对象之前，只需调用 this.showLoader() 之后，在 subscribe 集团中，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.');
      }
   );
}

在处理 hhtp post 请求时显示加载栏

Present loading bar while hhtp post request is being handled

loading

angular

ionic4