transitionToRoute('route') From Inside Component

Question

How do I transition to a route pragmatically from inside a component action?

I tried to use @get('controller').transitionToRoute('images'), but the controller refers to the component itself. I understand that components should be self contained, so should I be using a view instead to interact with controllers/routes better?

Example

App.ImageEditorComponent = Ember.Component.extend
  ...
  actions:
    delete: ->
      App.Files.removeObject(object)
      @transitionToRoute('images') # This throws an exception
  ...

Answer 1

You could pass the controller in via a binding and then access it inside your component like so:

{{image-editor currentControllerBinding="controller"}}

App.ImageEditorComponent = Ember.Component.extend
  ...
  actions:
    delete: ->
      App.Files.removeObject(object)
      @get('currentController').transitionToRoute('images')
  ...

Answer 2

Create action on parent controller.

export default Ember.Controller.extend({
  actions: {
    transInController() {
       this.transitionToRoute('home')
    }
  }
});

Specify this action on component call.

{{some-component transInComponent=(action "transInController")}}

AFTER v3.4.0 (August 27, 2018)

some-component.js

export default Component.extend({
  actions: {
      componentAction1() {
          this.transInComponent();
      }
  }
});

OR simpler in some-component.hbs

<button onclick={{@transInComponent}}>GO HOME</button>

BEFORE v3.4.0

Ember.component.sendAction

"Send Action" from component up to controller

export default Ember.Component.extend({
  actions: {
      componentAction1() {
          this.sendAction('transInComponent');
      }
  }
});