问题
How do I resolve a variable with UI Router when I am using a component.
This is the route:
$stateProvider
.state('route', {
url: '/route',
template: '<my-component user="user"></my-component>',
resolve: {
user: (Auth) => {
return Auth.getCurrentUser().$promise;
}
}
})
This is the component:
(function () {
class BookingListComponent {
constructor(user) {
//I want to use the user here but getting the unknown provider error
}
}
angular.module('app')
.component('myComponent', {
templateUrl: 'my-url.html',
controller: MyComponent,
bindings: {
user: '<'
}
});
})();
Using Angular 1.5 and yeoman angular-fullstack
回答1:
You will need to do one of the following:
- Create a controller for the state and bind the resolved value to the
$scope
. - Bind the reference of
Auth.getCurrentUser()
to the$rootScope
for it to be available for each state.
Example for approach #1:
.state('route', {
url: '/route',
template: '<my-component user="user"></my-component>',
controller: ($scope, user) => { $scope.user = user; },
resolve: {
user: (Auth) => {
return Auth.getCurrentUser().$promise;
}
}
});
Example for approach #2:
.run(($rootScope, Auth) => {
//This does NOT replace the resolve in your state definition but for this to work,
//Auth.getCurrentUser() must NEVER return null.
$rootScope.user = Auth.getCurrentUser();
});
Further explaination on approach #2:
Each $scope
will inherit from $rootScope
so as long $rootScope.user
points to an actual object, child scopes will point to the same object.
The best practice if you choose to go with #2 is to bind the user object to a property of a defined object on the $rootScope
to avoid any issues:
.run(($rootScope, Auth) => {
$rootScope.data = {
//Now user can be null.
user: Auth.getCurrentUser()
//Other shared data...
}
});
But then you'll have to update your template to use data.user
.
EDIT:
I've found this example in the docs, might shed a bit of light on the issue:
angular.module('myMod', ['ngRoute']);
.component('home', {
template: '<h1>Home</h1><p>Hello, {{ $ctrl.user.name }} !</p>',
bindings: {
user: '<'
}
})
.config(function($routeProvider) {
$routeProvider.when('/', {
//Notice $resolve?
template: '<home user="$resolve.user"></home>',
resolve: {
user: function($http) { return $http.get('...'); }
}
});
});
来源:https://stackoverflow.com/questions/38960842/resolve-using-ui-router-and-pass-to-a-components-controller