Interface Ng2ViewDeclaration

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.

Example:

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() { }
}

A property of Ng2StateDeclaration or Ng2ViewDeclaration:

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

Accessing Resolve Data

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() {
  }
}