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

angular ui-router: get $state info of toState in resolve

提问by Jonathan Grupp

Update: this should be possible in angular-ui-router as of 1.0.0alpha0. See the release notes https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0and the issue https://github.com/angular-ui/ui-router/issues/1018I created.

更新：这在 angular-ui-router 中应该是可能的1.0.0alpha0。请参阅发行说明https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0和问题https://github.com/angular-ui/ui-router/issues/1018I创建。

I would like to access the state's name and other attributes the app is navigating to using angular ui-router when working on the resolve.

我想访问状态的名称和应用程序在处理解析时使用 angular ui-router 导航到的其他属性。

The reason: I want load some user data (including their access rights) asynchronously before allowing the app the enter that page.

原因：我想在允许应用程序进入该页面之前异步加载一些用户数据（包括他们的访问权限）。

Currently this is not possible because injecting $state into the resolve points to the state you're navigating away form, not to the one you're navigating to.

目前这是不可能的，因为将 $state 注入到 resolve 中指向您要导航的状态，而不是您要导航到的状态。

I know I can:

我知道我可以：

• get the toState somewhere else with $rootScope('$stateChangeStart') and save it in my settings service for instance. But I think it's a little messy.
• hard code the state into the resolve, but I don't want to reuse my resolve for all pages

• 使用 $rootScope('$stateChangeStart') 在其他地方获取 toState 并将其保存在我的设置服务中。但是我觉得有点乱。
• 将状态硬编码到解析中，但我不想对所有页面重复使用我的解析

I also created an issue on the ui-router github (Please + 1 if you are interested!): https://github.com/angular-ui/ui-router/issues/1018

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

Here's my code so far. Any help appreciated!

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

.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
                    });
            }
        }
    });
});

回答by TaylorMac

Update for Ui-Router 1.x

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

用户界面路由器0.x

You can always decorate $statewith nextand toParamsproperties:

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

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;
  });
});

And use as such:

并使用：

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

回答by Nathan Rutman

So I discovered the answer to this myself. If you're code is behaving like mine, the $stateParams object is properly injected, but $state is an empty (or old) state object.

所以我自己发现了这个问题的答案。如果你的代码表现得像我的一样，$stateParams 对象被正确注入，但 $state 是一个空的（或旧的）状态对象。

What worked for me was referencing thisin the resolve function:

对我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
        }
    }
})

The first log will return what you'd expect. The second log will return a "raw" (for lack of a better term) state object. So, for instance, to get the state's name, you can access, this.self.name.

第一个日志将返回您期望的内容。第二个日志将返回一个“原始”（因为没有更好的术语）状态对象。因此，例如，要获取州名，您可以访问this.self.name.

I realize this isn't preferred...it would be a lot nicer if $state(or another standardized object) could provide this information for us at the resolve, but this is the best I could find.

我意识到这不是首选......如果$state（或另一个标准化对象）可以在解析时为我们提供这些信息会更好，但这是我能找到的最好的。

Hope that helps...

希望有帮助...

回答by Hari Haran

this.toString() will give you the state name

this.toString() 会给你州名

回答by Michael Warner

This has been asked here.

这已经被问到这里了。

It looks like they built into 1.0.0-rc.2$state$which you can inject into the resolve function and get this information.

看起来它们是内置的1.0.0-rc.2$state$，您可以将其注入解析函数并获取此信息。

resolve: {
  oneThing: function($state$) {
    console.log($state$);
  }
}