路由到嵌套的 UI 路由器状态时，如何检查将从父级调用哪个嵌套状态？答案

【问题标题】：When routing to a nested UI-router-state, how can I inspect which nested state will be called from the parent?路由到嵌套的 UI 路由器状态时，如何检查将从父级调用哪个嵌套状态？
【发布时间】：2014-10-16 13:30:28
【问题描述】：

我正在使用 Angular UI-router 模块导航到嵌套状态。

我有一个名为program 的状态和一个名为program.dashboard 的状态。

当用户路由到program（不提供嵌套路由）时，它应该重定向到program.dashboard。如何从州内判断它是否正在通往嵌套路线的途中？

我目前遇到的问题是路由到program 下的任何嵌套路由会导致重定向到program.dashboard，因为在评估程序路由时，它对仍然存在的子路由一无所知已加载。

这里有类似的答案，其中详细说明了我遇到的问题。他们指出，除了program.dashboard 之外，您永远无法导航到program 下的任何状态，这正是我想检查它的去向并有条件地重定向的原因。 Angular JS ui-router how to redirect to a child state from a parent?

任何帮助将不胜感激。

.state('program', {
            url: "/program/{programId:[0-9]{1,8}}",
            templateUrl: "components-child",
            controller: function($scope, $rootScope, orgService, $state, 
            $stateParams) {
                var vm = this;
                vm.curentOrganization = null;
                vm.currentProgram = null;

                $scope.$watch(function() {
                        return orgService.currentProgram();
                    },
                    function(newVal, oldVal) {
                        if (newVal != null) {
                             //this causes a redirect to program.dashboard
                             //even if I want to go to..say.. program.settings
                            $state.go('program.dashboard', 
                                 { programId: newVal.programId });

                            vm.currentProgram = newVal;
                        }
                    }, true);

            },
            params: { programId: { value: '{{currentProgram.programId}}' } },
        })
.state('program.dashboard', {
            url: "/dashboard",
            templateUrl: "dashboard-dashboard",
            controller: 'DashboardController as vm',
        })

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

如果我正确理解您的意图，您可能想监听 $stateChangeStart，而不是查看服务值。

app.run(function($state, $rootScope) { 
  $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
    if (toState.name === 'program') {
      // this is a transition directly to 'program'
      event.preventDefault(); // cancel the transition
      $state.go('program.dashboard', toParams); // push them to 'program.dashboard'
    }
  });
});

【讨论】：