ember.js - Ember transitionToRoute cleanly en un componente sin sendAction

Question

¿Cómo se puede llamar a transitionToRoute limpiamente desde un componente Ember?

Funciona con inyectar un controlador en el componente y llamar a la función transitionToRoute del controlador, sin embargo, me gustaría algo un poco más elegante si es posible.

Como se ve actualmente dentro del javascript del componente:

// this.controller is injected in an initializer
this.controller.transitionToRoute("some.target.route.name");

Lo que sería mejor en javascript del componente:

transitionToRoute("some.target.route.name");

Uno de los objetivos es hacer esto sin usar sendAction ya que este componente en particular tiene un único propósito y siempre debe pasar a la misma ruta. No es necesario que ningún otro artefacto Ember tenga en cuenta la ruta a la que este componente siempre transita, no hay necesidad de la indirección asociada. La responsabilidad de la ruta objetivo es propiedad de este componente.

Answer 1

Puede usar contenedor para obtener acceso a cualquier parte necesaria de la aplicación. Para obtener el controlador de la aplicación:

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

Pero, ¿qué pasa con la estructura de la aplicación? Los componentes deberían generar eventos. Por lo tanto, creo que es mejor usar sendAction. Porque en el futuro puede obtener una situación, cuando necesita filtrar dicho comportamiento (por ejemplo) u otra lógica específica de la aplicación antes de la transición

Answer 2

Si desea usar el enrutador solo en un componente o servicio específico o controlador , puede intentar esto:

Inicialice un atributo con el servicio privado -routing . El - porque aún no es una API pública.

router: service(''-routing''),

Y luego dentro de cualquier método de acción u otra función dentro del servicio o componente:

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

Nota: Será transitionToRoute en un controlador.

Answer 3

22 de enero de 2018 actualización
A partir de Ember 2.15 , se implementa la fase 1 del servicio enrutador público .
Transición a una ruta desde dentro de un componente:

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

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

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

});

Answer 4

ACTUALIZACIÓN Consulte las otras respuestas más recientes sobre cómo lograr esto con menos código en las nuevas versiones de Ember, y vóselas si funcionan para usted. ¡Gracias!

Inyecte el router en los componentes y llame a this.get(''router'').transitionTo(''some.target.route.name'') .

Para inyectar el router en todos los componentes, escriba un inicializador en app/initializers/component-router-injector.js con los siguientes contenidos:

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

Uso de muestra en un componente:

import Ember from ''ember'';

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