在 UI-Router 中调用子状态时触发无限循环
Infinite loop triggered when calling child state in UI-Router
我在 UI-Router 的父控制器中有以下配置。
$stateProvider.state('store', {
abstract: true,
url: '/:store',
resolve: {
Store : ['StoreService', '$stateParams', '$state', '$rootScope', function (StoreService, $stateParams, $state, $rootScope) {
return StoreService.getStoreByCode($stateParams.store).then(
function (response){
$rootScope.Store = response.data;
return response.data;
},
function (response){
$state.go('store.404', $stateParams);
}
);
}]
},
templateUrl: 'app/app.html'
});
然后在子配置中我有:
$stateProvider
.state('store.404', {
parent:'store',
url: '/store.404',
template: '<h1>Whoa! 404!</h1>'
});
问题是当 resolve 语句中的 promise 被拒绝时,$state.go('store.404')
触发无限循环并导致浏览器崩溃。
这是因为父级每次尝试进入子状态时都在加载和解析吗?有没有一种干净的方法可以在子状态上不触发该解析语句?
...Is this because the parent is loading and resolving every time it tries to go to that child state?
是的。
...Is there a clean way to not have that resolve statement trigger on the child state?
没有
解决方案是 - 像“404”这样的状态应该是单独的、特殊的。这样,将始终可用,没有任何限制或错误处理。
即- 将“404”状态移到任何父级之外。
我在 UI-Router 的父控制器中有以下配置。
$stateProvider.state('store', {
abstract: true,
url: '/:store',
resolve: {
Store : ['StoreService', '$stateParams', '$state', '$rootScope', function (StoreService, $stateParams, $state, $rootScope) {
return StoreService.getStoreByCode($stateParams.store).then(
function (response){
$rootScope.Store = response.data;
return response.data;
},
function (response){
$state.go('store.404', $stateParams);
}
);
}]
},
templateUrl: 'app/app.html'
});
然后在子配置中我有:
$stateProvider
.state('store.404', {
parent:'store',
url: '/store.404',
template: '<h1>Whoa! 404!</h1>'
});
问题是当 resolve 语句中的 promise 被拒绝时,$state.go('store.404')
触发无限循环并导致浏览器崩溃。
这是因为父级每次尝试进入子状态时都在加载和解析吗?有没有一种干净的方法可以在子状态上不触发该解析语句?
...Is this because the parent is loading and resolving every time it tries to go to that child state?
是的。
...Is there a clean way to not have that resolve statement trigger on the child state?
没有
解决方案是 - 像“404”这样的状态应该是单独的、特殊的。这样,将始终可用,没有任何限制或错误处理。
即- 将“404”状态移到任何父级之外。