Ember transitionToRoute在没有sendAction的组件中干净利落

Question

如何transitionToRoute从Ember组件中干净地调用？

它可以将控制器注入组件并调用控制器的transitionToRoute功能,但是如果可能的话,我想要更优雅的东西.

它在组件的javascript中目前看起来像什么:

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

组件的javascript会更好:

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

一个目标是在不使用的情况下执行此操作,sendAction因为此特定组件具有单一用途,并且应始终转换到相同的路径.没有必要让任何其他Ember工件知道该组件总是转换到的路由,不需要相关的间接.目标路由的责任由此组件拥有.

Answer 1

更新请查看其他更近期的答案,了解如何在较新的Ember版本中使用较少的代码实现此目的,如果它们适合您,请将其投票 - 谢谢!

注入router组件并调用this.get('router').transitionTo('some.target.route.name').

要注入router所有组件,请app/initializers/component-router-injector.js使用以下内容编写初始化程序:

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

组件中的示例用法:

import Ember from 'ember';

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

Answer 2

2018年1月22日更新
自Ember 2.15起,实施了公共路由器服务的第1阶段.
从组件内部转换到路径:

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

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

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

});

Answer 3

用 router: service()

代替 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);
    }
  }
});

Answer 4

您可以使用容器来访问应用程序的任何需要的部分。要获取应用程序控制器：

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

但是应用程序的结构怎么样——组件应该生成事件——所以我认为最好使用 sendAction。因为将来当您需要在转换之前过滤此类行为（例如）或其他特定于应用程序的逻辑时，您可能会遇到这种情况