Question

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

它可以将控制器注入到组件中并调用控制器的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，public router service的第1阶段已实施从组件内部转换到路径：

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

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

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

});

Answer 3

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

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

但是应用程序的结构如何 - 组件应该生成事件 - 所以我认为最好使用sendAction。因为将来你需要在转换之前过滤这种行为（例如）或其他特定于应用程序的逻辑

Answer 4

如果您只想在特定的组件或服务或控制器中使用路由器，您可以尝试这样做：

使用私人服务-routing初始化属性。 -，因为它还不是公共API。

router: service('-routing'),

然后在服务或组件内的任何操作方法或其他函数内部：

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

注意：它在控制器中是transitionToRoute。

Answer 5

使用 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);
    }
  }
});

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

5 个答案: