首页 文章

angular ui-router：在解析中获取toState的$ state状态信息

提问于
浏览 次
45

Update ：从 1.0.0alpha0 开始，这应该可以在angular-ui-router中使用 . 请参阅发布说明https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0以及我创建的问题https://github.com/angular-ui/ui-router/issues/1018 .

在处理解决方案时，我想访问应用程序导航到使用角度ui-router的状态名称和其他属性 .

原因是：我想在允许应用程序输入该页面之前异步加载一些用户数据（包括其访问权限） .

目前这是不可能的，因为将$ state注入解决点指向您正在导航的状态，而不是您要导航到的状态 .

我知道我可以：

  • 使用$ rootScope（'$stateChangeStart'）在其他地方获取toState并将其保存在我的设置服务中 . 但我觉得它有点乱 .

  • 硬编码状态进入解决，但我不想重用我的所有页面的决心

我还在ui-router github上创建了一个问题（如果你有兴趣，请给我一个！）：https://github.com/angular-ui/ui-router/issues/1018

到目前为止，这是我的代码 . 任何帮助赞赏！

.config(function($stateProvider) {

    $stateProvider.state('somePage', {
        // ..
        resolve: {
            userData: function($stateParams, $state, Settings) {
                return Settings.getUserData() // load user data asynchronously
                    .then(function (userData) {
                        console.log($stateParams);
                        console.log($state);
                        // Problem: $state still points to the state you're navigating away from
                    });
            }
        }
    });
});
javascript angularjs angular-ui angular-ui-router

3 回答

  • 31

    Ui-Router 1.x的更新

    $provide.decorator('$state', ($delegate, $transitions) => {
    $transitions.onStart({}, (trans) => {
      $delegate.toParams = trans.params()
      $delegate.next = trans.to().name
    })
    return $delegate
  })

    Ui-Router 0.x

    您始终可以使用 next 和 toParams 属性装饰 $state ：

    angular.config(function($provide) {
  $provide.decorator('$state', function($delegate, $rootScope) {
    $rootScope.$on('$stateChangeStart', function(event, state, params) {
      $delegate.next = state;
      $delegate.toParams = params;
    });
    return $delegate;
  });
});

    并使用如下：

    .state('myState', {
    url: '/something/{id}',
    resolve: {
        oneThing: function($state) {
            console.log($state.toParams, $state.next);
        }
    }
});
    回复于
  • 1

    所以我自己发现了答案 . 如果您的代码行为与我的相似，则会正确注入$ stateParams对象，但$ state是一个空（或旧）状态对象 .

    对我有用的是在resolve函数中引用 this ：

    .state('myState', {
    url: '/something/{id}',
    templateUrl: '/myTemplate.html',
    controller: function() {},
    resolve: {
        oneThing: function($stateParams) {
            console.log($stateParams); // comes through fine
            var state = this;
            console.log(state); // will give you a "raw" state object
        }
    }
})

    第一个日志将返回您'd expect. The second log will return a 2950276 (for lack of a better term) state object. So, for instance, to get the state'的名称，您可以访问， this.self.name .

    我意识到这不是首选......如果 $state （或其他标准化对象）可以在决心时为我们提供此信息会更好，但这是我能找到的最好的 .

    希望有帮助......

    回复于
  • 55

    this.toString（）将为您提供州名称

    回复于

相关问题