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.0alpha0 and the issue https://github.com/angular-ui/ui-router/issues/1018 I 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/1018。
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.
我想访问这个应用程序在使用角度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注入到您正在导航的状态的状态中，而不是您正在导航的状态。
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.
- 使用$rootScope(“$stateChangeStart”)将toState保存到我的设置服务中。但我觉得有点乱。
- hard code the state into the resolve, but I don't want to reuse my resolve for all pages
- 将状态硬编码到解析中，但我不想对所有页面重用我的解析
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
});
}
}
});
});
3 个解决方案
#1
54
Update for 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
You can always decorate $state with next and toParams properties:
你可以用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;
});
});
And use as such:
和使用:
.state('myState', {
url: '/something/{id}',
resolve: {
oneThing: function($state) {
console.log($state.toParams, $state.next);
}
}
});
#2
30
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 this in the resolve function:
对我起作用的是在resolve函数中引用这个:
.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.
第一个日志将返回您预期的结果。第二个日志将返回一个“raw”(由于没有更好的术语)状态对象。例如，要获取状态名，可以访问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...
希望这有助于……
#3
1
this.toString() will give you the state name
this.toString()将给出状态名
#1
54
Update for 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
You can always decorate $state with next and toParams properties:
你可以用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;
});
});
And use as such:
和使用:
.state('myState', {
url: '/something/{id}',
resolve: {
oneThing: function($state) {
console.log($state.toParams, $state.next);
}
}
});
#2
30
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 this in the resolve function:
对我起作用的是在resolve函数中引用这个:
.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.
第一个日志将返回您预期的结果。第二个日志将返回一个“raw”(由于没有更好的术语)状态对象。例如，要获取状态名，可以访问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...
希望这有助于……
#3
1
this.toString() will give you the state name
this.toString()将给出状态名