Ember transitionToRoute cleanly in a component without sendAction

Question

How can transitionToRoute be called cleanly from within an Ember component?

It works with injecting a controller into the component and calling the cont

Answer 1

If you want to use the router only in a specific component or service or controller, you may try this:

Initialize an attribute with the private service -routing. The - because it's not a public API yet.

router: service('-routing'),

And then inside any action method or other function inside the service or component:

this.get('router').transitionTo(routeName, optionalParams);

Note: It'll be transitionToRoute in a controller.

Answer 2

You can use container to get access to any needed part of application. To get application controller :

this.container.lookup('controller:application')

But what about structure of application - components should generate events - so my opinion it's better to use sendAction. Cause in future you can get situation, when you need to filter such behavior ( for example ) or other application-specific logic before transition

Answer 3

---

---

UPDATE Please see the other more recent answers for how to achieve this with less code in newer Ember versions, and vote those up if they work for you - Thanks!

---

---

Inject the router into the components and call this.get('router').transitionTo('some.target.route.name').

To inject the router into all components, write an initializer at app/initializers/component-router-injector.js with the following contents:

// app/initializers/component-router-injector.js
export function initialize(application) {
  // Injects all Ember components with a router object:
  application.inject('component', 'router', 'router:main');
}

export default {
  name: 'component-router-injector',
  initialize: initialize
};

Sample usage in a component:

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    submit: function() {
      this.get('router').transitionTo('some.target.route.name');
    }
  }
});

Answer 4

Jan 22, 2018 update
As of Ember 2.15, phase 1 of the public router service is implemented.
Transition to a route from inside a component:

import { inject as service } from '@ember/service';

export default Ember.Component.extend({
  router: service(),

  actions: {
    someAction() {
        this.get('router').transitionTo('index');
    }
  }

});

Answer 5

Use router: service()

instead of router: service('-routing')

import Component from '@ember/component';
import {inject as service} from '@ember/service';

export default Component.extend({
  router: service(),

  actions: {
    onClick(params) {
      let route = this.getMyRoute(params);
      this.get('router').transitionTo(route);
    }
  }
});