返回 EMPTY 时,Angular 8 路由解析器不会取消路由导航

标签 angular angular-resolver

我正在添加一个 Angular 8 路由解析器来预取数据。在失败(出于任何原因)时,我返回一个 EMPTY 以取消路线导航。但是,当我对此进行测试时,我可以进入 catchError 块,它显示 toastr ,并返回 EMPTY,但并未取消路线导航。根据我读过的所有文章,这应该有效。想知道是否有人看到了我没有看到的东西。我只包含了 resolve 方法,因为所有其他配置都在工作。


  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Country[]> | Observable<never> {
    return this.countryService.getCountries().pipe(      
      mergeMap((countries) => {
        if (countries)
        {
          return of(countries);
        }
        return EMPTY;
      }),
      catchError(error => {
        this.toasterService.pop('error', '', 'There was a problem prefetching the data required to submit a request. If the problem persists, please notify the administrator.');
        return EMPTY;
      }));
  }

根据 Angular 文档,我希望此代码取消导航。

最佳答案

更新:我回到源代码 angular.io 并查看了 angular 团队如何实现解析器。他们有一段代码,所有其他博客文章都没有:

 resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Country[]> | Observable<never> {
    return this.countryService.getCountries().pipe(      
      mergeMap((countries) => {
        if (countries)
        {
          return of(countries);
        }
        this.router.navigate(['/']);//<----- THIS LINE, TO RE-DIRECT TO ANOTHER ROUTE
        return EMPTY;
      }),
      catchError(error => {
        this.toasterService.pop('error', '', 'There was a problem prefetching the data required to submit a request. If the problem persists, please notify the administrator.');
        this.router.navigate(['/']);//<----- THIS LINE, TO RE-DIRECT TO ANOTHER ROUTE
        return EMPTY;
      }));
  }

所以添加路由器重定向对我来说似乎是一个额外的步骤。特别是因为与 EMPTY 将取消导航直接矛盾。我错过了什么?

关于返回 EMPTY 时,Angular 8 路由解析器不会取消路由导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57079269/

相关文章:

javascript - Angular 8 解析器未解析

angular - 路由到具有不同参数的相同 url 后,页面上的数据未更新

Angular 2+ - 数据加载 : best practices

javascript - string.length 输出错误值?

Angular 2动态双向绑定(bind)

Angular 4 HttpClientModule

angular - 在 Angular 5 中,刷新当前路由会重定向到父路由

html - Angular - 选择选项元素上的单击事件

angular - 如何创建将模板包装在其他元素中的自定义指令(Angular 2)?

Angular 通用 - TypeError : Converting circular structure to JSON