在UI路由器中调用子状态时触发了无限循环

Infinite loop triggered when calling child state in UI-Router

本文关键字:无限循环 状态 UI 路由器 调用      更新时间:2023-09-26

我在UI路由器的父控制器中有以下配置。

$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')会触发无限循环并导致浏览器崩溃。

这是因为父级每次尝试转到该子级状态时都在加载和解析吗?有没有一种干净的方法可以在子状态上不触发解析语句?

。。。这是因为父级每次尝试转到该子级状态时都在加载和解析吗

是的。

。。。有没有一种干净的方法可以在子状态上不触发解析语句

解决方案是,像"404"这样的状态应该是独立的、特殊的。这样,它将始终可用,没有任何限制或错误处理。

即,将"404"状态移动到任何父级之外。