$transition$ within route to component

[ghost]

• [ ] Bug Report
• [ ] Feature Request
• [x] General Query

My version of UI-Router is: 1.0.14

General Query

I've a question regarding accessing $transition$ within a route to component scenario.

According the following guide you recommend binding the $transition$ object to the component:

.state('userlist', {
  url: '/users/:myparam',
  component: 'users',
});

.component('users', {
  bindings: { $transition$: '<' },
  template: 'my template',
  controller: function() {
    this.$onInit = () => console.log(this.$transition$.params().myparam);
  }
}

In my opinion the following pattern would be better, as the component knows nothing about any routing information and everything is encapsulated in the routing module:

.state('userlist', {
  url: '/users/:myparam',
  component: 'users',
  resolve: {
    myparam: function($transition$) {
      return $transition$.params().myparam
    }
  }
});

.component('users', {
  bindings: { myparam: '<' },
  template: 'my template',
  controller: function() {
    this.$onInit = () => console.log(this.myparam);
  }
}

[christopherthielen]

In my opinion the following pattern would be better, as the component knows nothing about any routing information and everything is encapsulated in the routing module:

I agree completely. However, I do believe in some cases you may still want the whole transition in your component. This is also important for a migration guide if somebody's existing code already injected and used $transition$.