使用angular-ui-router在解析中处理404

Question

我有一个带有方法的服务：

service.getVenueBySlug = function(slug) {
    return $http.get(API + '/venue/' + slug);
};

在我的app.routes.js`中：

.state('app.venue', {
  url: '/venues/:venueSlug',
  templateUrl: '/app/views/venue.html',
  controller: 'VenueController',
  resolve: {
    venue: ['VenueService', '$stateParams', '$state', function (VenueService, $stateParams, $state) {
      return VenueService.getVenueBySlug($stateParams.venueSlug).then(function(res) {
        return res.data;
      }).catch(function(err) {
        $state.go('app.404');
      });
    }]
  }
})

控制器VenueController简单地具有：

$scope.venue = venue

一切正常，如果我手动转到一个带有错误站点插件的URL，它会正确地重定向到404。

问题是我在控制台中收到了一个错误，它困扰着我：

​

​

有没有人知道怎么修？我使用的是angular 1.6.4和angular-ui-router 1.0.6。

Answer 1

正如在你的帖子的评论中提到的-在你的resolve's catch中，你可能应该做一些事情:返回$q.reject({redirectTo: app.404})；

然后在您的路由器配置中侦听stateChangeErrors：

$rootScope.$on('$stateChangeError',
   function(event, toState, toParams, fromState, fromParams, error) {
      if(error.redirectTo) {
         $state.go(error.redirectTo);
      }
   } 
})

$q.reject需要处理(中断)当前的stateChange，而stateChangeError则负责处理该拒绝。

(我没有测试代码，但我记得在我的一个项目中有一个类似的解决方案)