When using a component declaration (component: MyComponent), each input binding for the component is supplied
data from a resolve of the same name, by default. You may supply data from a different resolve name by mapping it here.
Each key in this object is the name of one of the component's input bindings.
Each value is the name of the resolve that should be provided to that binding.
Any component bindings that are omitted from this map get the default behavior of mapping to a resolve of the
same name.
example
$stateProvider.state('foo', {
resolve: {
foo: function(FooService) { return FooService.get(); },
bar: function(BarService) { return BarService.get(); }
},
component: 'Baz',
// The component's `baz` binding gets data from the `bar` resolve// The component's `foo` binding gets data from the `foo` resolve (default behavior)
bindings: {
baz: 'bar'
}
});
app.component('Baz', {
templateUrl: 'baz.html',
controller: 'BazController',
bindings: {
foo: '<', // foo binding
baz: '<'// baz binding
}
});
The component class which will be used for this view.
example
.state('profile', {
// Use the <my-profile></my-profile> component for the Unnamed view
component: MyProfileComponent,
}
.state('messages', {
// use the <nav-bar></nav-bar> component for the view named 'header'// use the <message-list></message-list> component for the view named 'content'
views: {
header: { component: NavBar },
content: { component: MessageList }
}
}
// Named views shorthand:// Inside a "views:" block, a Component class (NavBar) is shorthand for { component: NavBar }
.state('contacts', {
// use the <nav-bar></nav-bar> component for the view named 'header'// use the <contact-list></contact-list> component for the view named 'content'
views: {
header: NavBar,
content: ContactList
}
}
An object which maps
resolve
keys to componentbindings
.A property of Ng2StateDeclaration or Ng2ViewDeclaration:
When using a component declaration (
component: MyComponent
), each input binding for the component is supplied data from a resolve of the same name, by default. You may supply data from a different resolve name by mapping it here.Each key in this object is the name of one of the component's input bindings. Each value is the name of the resolve that should be provided to that binding.
Any component bindings that are omitted from this map get the default behavior of mapping to a resolve of the same name.
$stateProvider.state('foo', { resolve: { foo: function(FooService) { return FooService.get(); }, bar: function(BarService) { return BarService.get(); } }, component: 'Baz', // The component's `baz` binding gets data from the `bar` resolve // The component's `foo` binding gets data from the `foo` resolve (default behavior) bindings: { baz: 'bar' } }); app.component('Baz', { templateUrl: 'baz.html', controller: 'BazController', bindings: { foo: '<', // foo binding baz: '<' // baz binding } });