在切换到下一个路由之前执行 http 请求

Question

我想在离开页面导航到任何其他路由时执行 post 请求。

我试过使用：

  this.subscriptionGrade = router.events
      .pipe(filter((event) => event instanceof NavigationStart))
      .pipe(
        concatMap(() => {
          return this.submitScore();
        })
      )
      .subscribe((res) => {
        this.snackBar.openSnackBar("Score submitted", "");
      });


  submitScore() {
    const score = { score: this.scoreForm.get("score").value };
    if (this.scoreForm.get("score").value) {
      return this.learningContentService.gradeAssignment(
        this.selectedAttempt,
        score
      );
    } else {
      return of(null);
    }
  }

这会执行 http 请求，但会在收到来自 http 请求的响应并且请求被取消之前切换到下一个路由。

Answer 1

您可以在此路由上使用canDeactivate 并检查http 调用是否成功

export interface CanComponentDeactivate {
 canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

...

@Injectable()
class CanDeactivateComponent implements CanDeactivate<CanComponentDeactivate>{
 constructor() {}
 canDeactivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
 let data= route.data.data;
 return this.service.post(url, data)
   .pipe(
     map(response => response.status === 'success'),
     catchError(error => of(false))
   );
 }
}

你的路线

{
 path: 'yourRoute',
 component: Component,
 canActivate: [CanDeactivateComponent ],
 data: { data: {...}}
}

在切换到下一个路由之前执行 http 请求

Perform http request before switching to next route

angular-routing

angular

angular-router

angular8