web-dev-qa-db-fra.com

Ember transitionToRoute proprement dans un composant sans sendAction

Comment transitionToRoute peut-il être appelé proprement depuis un composant Ember?

Cela fonctionne en injectant un contrôleur dans le composant et en appelant la fonction transitionToRoute du contrôleur, mais j'aimerais quelque chose d'un peu plus élégant si possible.

À quoi ressemble-t-il actuellement dans le javascript du composant:

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

Quoi de plus agréable dans le javascript du composant:

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

Un objectif est de le faire sans utiliser sendAction car ce composant particulier a un seul but et doit toujours effectuer la transition vers le même itinéraire. Il n'est pas nécessaire que les autres artefacts Ember soient conscients de la route par laquelle ce composant est toujours transi, ni l'indirection associée. La responsabilité de la route cible appartient à ce composant.

ember.js
28
Eliot Sykes

UPDATEVeuillez consulter les réponses plus récentes pour savoir comment y parvenir avec moins de code dans les nouvelles versions d'Ember et votez pour celles-ci si elles fonctionnent pour vous - Merci!

Injectez la router dans les composants et appelez this.get('router').transitionTo('some.target.route.name').

Pour injecter la router dans tous les composants, écrivez un initialiseur à app/initializers/component-router-injector.js avec le contenu suivant:

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

Exemple d'utilisation dans un composant:

import Ember from 'ember';

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

Mise à jour du 22 janvier 2018
À partir de Ember 2.15 , la phase 1 du service de routeur public est mise en œuvre.
Transition vers une route depuis l'intérieur d'un composant:

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

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

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

});
8
myartsev

Si vous souhaitez utiliser le routeur uniquement dans un composant ou service ou controller spécifique, vous pouvez essayer ceci:

Initialiser un attribut avec le service privé -routing. Le - car ce n'est pas encore une API publique.

router: service('-routing'),

Et puis à l'intérieur de toute méthode d'action ou autre fonction à l'intérieur du service ou du composant:

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

Note: Ce sera transitionToRoute dans un contrôleur.

3
Jayant Bhawal

Vous pouvez utiliser conteneur pour accéder à n’importe quelle partie nécessaire de l’application. Pour obtenir le contrôleur d'application:

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

Mais qu’en est-il de la structure de l’application - les composants devraient générer des événements - je pense donc qu’il est préférable d’utiliser sendAction. Parce qu'à l'avenir, vous pouvez obtenir une situation lorsque vous devez filtrer un tel comportement (par exemple) ou une autre logique spécifique à l'application avant la transition.

3
Vasiliy Vanchuk

Utilisez router: service()

au lieu de 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);
    }
  }
});
0
ecairol