Ember.js 从内部组件传递路线（'；路线'；）

如何从组件动作内部务实地过渡到路由？

我试图使用

@get（'controller'）。transitionRoute（'images'）

，但控制器引用组件本身。我知道组件应该是自包含的，所以我应该使用视图来更好地与控制器/路由交互吗

范例

---

您可以通过绑定将控制器传入，然后在组件内部访问它，如下所示：

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

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

---

组件应该与其上下文隔离，因此虽然可以将引用传递给控制器，但这可能超出了组件的作用范围。您可能只想坚持使用带有自己控制器的视图。退房

---

在Ember.js中，讨论了从路由层次结构上的组件发送操作。

在component.HBS组件文件中创建一个

{{#链接到“RoutedDestinationYouwant”}

例如：

<section class="component">
{{#link-to "menu.shops.category.content" "param"}}
        <figure id="{{Id}}" class="list-block yellow-bg text-center" {{action "showList" "parameter"}}>
            <section class="list-block-icon white-text my-icons {{WebFont}}"></section>
            <figcaption class="list-block-title black-text">{{{Title}}}</figcaption>
        </figure>
          {{/link-to}}
</section>

{{#链接到“menu.shops.category.content”“param”}
{{{Title}}}
{{/链接到}

我为另一个类似的问题写了这个答案

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

使用专用服务路由初始化属性。因为它还不是一个公共API

路由器：服务（'-routing'），

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

this.get（'router'）.transitiono（routeName，optionalParams）

注意：它将是控制器中的
TransitionRoute

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

问题链接：

链接至答案：
自最初的帖子发布以来，余烬中发生了很多变化。因此，今天最好的选择可能是将负责转换的路由操作传递给组件（可能使用奇特的插件）

否则，您可以使用
ember g initializer router
创建一个初始值设定项，并在其中放入类似于此的代码

export function initialize (application) {
   application.inject('route', 'router', 'router:main')
   application.inject('component', 'router', 'router:main') 
}

export default {
  name: 'router',
  initialize
}

这样，您可以使用
This.get（'router'）
访问组件中的路由器，例如，执行转换

 this.get('router').transitionTo('images')

在父控制器上创建操作

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

在组件调用时指定此操作

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

之后

some-component.js

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

或在某些组件中更简单。hbs

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

我觉得这样的想法是组件不应该知道主机控制器的操作。您可能想改为发送一条消息。@aceofspades很可能。到目前为止，我知道视图可能知道控制器，但控制器可能不知道Ember中的视图。您能给我一个示例作为答案吗？好奇这会是什么工作；有一个模糊的想法。@aceofspades假设你的意思是这样，我想我可以设置一个
fileDeletedAction
然后
this.sendAction（'fileDeletedAction'）而不是
currentControllerBinding
。就是这样做的。我更喜欢解耦。很容易在应用程序的不同部分更改到另一个位置。请写下答案。在Ember 1.8.1中适用于我。这不是我搜索的正确方法。可能有其他方法。我会注意到，这不再是正确的操作，因为Ember已经更改了很多。对于那些谁是Ember 2+，我将标记一个更正确的答案。如果您仍在使用1.13，欢迎尝试上述答案。链接到组件无法应用于单击到简单范围。我在这里面临相同的问题。我如何从组件操作转换到另一个路径。对我有效：D.@heat我只使用一个普通的
并包装一个
{{#链接到'route name'}{{/link to}}
在按钮周围，然后使用CSS将我的按钮样式设置为文本标签或span，既美观又简单。我会进一步修改此选项，将决定转换到何处的选项作为一个选项，但现在使用Ember时这是正确的答案。
export default Ember.Component.extend({
  actions: {
      componentAction1() {
          this.sendAction('transInComponent');
      }
  }
});