The raw name for the view declaration, i.e., the StateDeclaration.views property name.
A type identifier for the View
This is used when loading prerequisites for the view, before it enters the DOM. Different types of views may load differently (e.g., templateProvider+controllerProvider vs component class)
The normalized context anchor (state name) for the uiViewName
When targeting a ui-view, the uiViewName address is anchored to a context name (state name).
The normalized address for the ui-view which this ViewConfig targets.
A ViewConfig targets a ui-view in the DOM (relative to the uiViewContextAnchor) which has
a specific name.
An object which maps resolve keys to component bindings.
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.
This might be useful if you want to reuse the same resolve value with various components with different input binding names.
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.
export const fooState = {
name: 'foo',
component: MyComponent,
resolve: [
{ token: 'users', deps: [UserService], resolveFn: getUsers }
],
bindings: {
resolveData: 'users'
}
}
export function getUsers(userservice) {
return userservice.getUsers();
}
@Component() {
}
class MyComponent {
@Input() resolveData;
constructor() { }
}
The Component class to use for this view.
A property of Ng2StateDeclaration or Ng2ViewDeclaration:
.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
}
}
The component can access the Transition's Ng2StateDeclaration.resolve data in one of two ways:
1) Using Dependency Injection in the component constructor
(using Typescript)
class MyComponent {
constructor(@Inject("myResolveData") public resolveValueA, resolveValueB: public SomeClass) {
}
}
(using ES6/7/babel)
class MyComponent {
static get parameters() {
return [["myResolveData"], [MyResolveClass]];
}
constructor(resolveValueA, resolveValueB) {
this.resolveValueA = resolveValueA;
this.resolveValueB = resolveValueB;
}
}
See also: https://github.com/shuhei/babel-plugin-angular2-annotations
2) Using a component input
Note: To bind a resolve to a component input, the resolves must provide: a string value
@Component() {
inputs: ['resolveValueA']
}
class MyComponent {
myResolveValueA;
@Input() resolveValueB;
@Input("resolveValueC") resolveValueC;
constructor() {
}
}
Generated using TypeDoc
The context that this view is declared within.