AngularJS [UI-Router] urlRouteProvider.when() 与路由到子状态的解析 [英] AngularJS [UI-Router] urlRouteProvider.when() versus resolve for routing to child states

问题描述

在我的应用程序中，我有一个名为仪表板"的状态，其中包含多个子状态

In my app I have a state called 'dashboard' with multiple child states

.state('dashboard', {
    url: '/dashboard',
    abstract: true,
    // resolve async objects before controller instantiation.
    resolve: {
        productResolve: function ($state, authService, cacheService, productService) {
            var cache = cacheService.getCache();
            if (cache.length === 0){
                return productService.getProductsAndCommoditiesAsync(authService.getCredentials().roleID)
                    .then(function(productData){
                        cacheService.setCache(productData);
                    },
                    function(errorMessage){
                        $state.go('error',{errorMessage:errorMessage});
                    });                         
            }               
       }
    },        
    templateUrl: '/static/app/partials/dashboard.html',
    controller: 'dashboardCtrl',
})
// parent state: dashboard
.state('dashboard.splash', {
    templateUrl: '/static/app/partials/dashboard.splash.html',
    controller: 'dashboard.splashCtrl'
})
// parent state: dashboard
.state('dashboard.podSelector', {    
    // params array can be used instead of url to populate $stateParams
    params: ['productIndex', 'commodityIndex'],
    templateUrl: '/static/app/partials/dashboard.pod-selector.html',           
    controller: 'dashboard.podSelectorCtrl'

用户将被重定向到哪个子状态取决于他/她的会话 cookie，我很好奇在哪里进行重定向.

Which child state the user will be redirected to depends on his/her session cookie, and I was curious where the appropriate place was to do the redirecting.

我能想到的一个选项是将父仪表板状态设置为非抽象状态，以便能够导航到，然后从仪表板父级解析承诺中检查会话，然后执行 $state.go一个孩子取决于结果.理想情况下，我希望将仪表板父状态抽象为它自己无用，但如果它总是会重定向到子状态，那么我想它并不重要.

One option I can think of are either to set the parent dashboard state to be not abstract so it is able to be navigated to, then check the session from within the dashboard parent resolve promise, and do a $state.go to a child depending on the result. I ideally would like to keep the dashboard parent state abstract as its useless on its own, but if it always will redirect to a child state then I guess its not important if it is.

我想到的替代方法是使用 $urlRouterProvider.when() 处理它，例如:

The alternative I was thinking of is to handle it with a $urlRouterProvider.when(), something like:

$urlRouterProvider.when('/dashboard', function($state, sessionService){
    if (sessionService.getSession() === undefined) {
        $state.go('dashboard.splash');
    }
}); 

这看起来更简洁，更合乎逻辑，但是如果我从登录状态转换到仪表板状态，如果我在解析中重定向，我可以使用 $state.go 从登录页面转换('dashboard') 而如果我使用 $urlRouterProvider 我需要做一个 $location.path('/dashboard')，我不知道有多少转换到带有位置路径的状态而不是 $state.go 是不赞成的.

This seems cleaner and a more logical place to put it, but say if I'm transitioning to the dashboard state from a login state, if I redirect in the resolve I can transition from the login page with a $state.go('dashboard') while if I use $urlRouterProvider I need to do a $location.path('/dashboard'), which I don't know how much transitioning to states with location paths versus $state.go is frowned upon.

任何建议将不胜感激.

推荐答案

用户将被重定向到哪个子状态取决于他/她的会话 cookie，我很好奇在哪里进行重定向.

Which child state the user will be redirected to depends on his/her session cookie, and I was curious where the appropriate place was to do the redirecting.

一般来说，如果您想根据应用程序状态或会话状态驱动导航，我建议您使用服务拦截 $stateChangeStart 事件并将它们发送到应有的位置.

In general, if you want to drive navigation based on app state or session state, I would suggest you use a service to intercept the $stateChangeStart event and send them where they should be.

因此，在您应用的 module.run 回调中，您可以说:

$rootScope.$on('$stateChangeStart', function(event, toState) {
  if (toState.name === 'dashboard') {
    event.preventDefault();

    switch (myCondition) {
      case 1:
        $state.go('dashboard.splash');
        break;
      case 2:
        $state.go('dashboard.podSelector');
        break;
      default:
        $state.go('somewhereElse');
        break;
    }
  }
});

这样，您就不会因为进入一个您从未打算停留的状态而让转换花费昂贵的时间和精力，并且您不依赖于 $urlRouter.when.

This way, you don't let the transition take costly time and energy by going to a state that you never intend to stay on, and you don't rely on $urlRouter.when.

这篇关于AngularJS [UI-Router] urlRouteProvider.when() 与路由到子状态的解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！