Question

如何从组件操作内部实际转换到路线？

我尝试使用@get('controller').transitionToRoute('images')，但控制器引用了组件本身。我理解组件应该是自包含的，所以我应该使用视图来更好地与控制器/路由交互吗？

实施例

App.ImageEditorComponent = Ember.Component.extend
  ...
  actions:
    delete: ->
      App.Files.removeObject(object)
      @transitionToRoute('images') # This throws an exception
  ...

Answer 1

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

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

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

Answer 2

在父控制器上创建操作。

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

在组件调用上指定此操作。

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

v3.4.0 (August 27, 2018)

之后

一些-component.js

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

some-component.hbs中

OR 更简单

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

在v3.4.0之前

Ember.component.sendAction

从组件到控制器的

“发送操作”

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

Answer 3

组件应该与其上下文隔离，因此虽然您可以传入对控制器的引用，但这可能超出了组件的范围。您可能希望坚持使用具有自己的控制器的视图。查看Views Over Components - An Ember Refactoring Story。

来自Ember.js，Sending Actions from Components to Your Application，讨论了从路由层次结构中的组件发送动作。

Answer 4

自从原帖以来，Ember发生了很多变化。所以今天也许最好的选择是向组件传递一个负责转换的路由操作（可能使用花哨的插件ember-cli-route-action。

否则你可以使用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')访问组件中的路由器，例如，执行转换

  donners-mbp-2:~ Donner$ brew list
     cmake      isl     mercurial   python      smpeg
     freetype   jpeg        mpfr        readline    sphinx-doc
     gcc        libmpc      numpy       sdl     sqlite
     gdbm       libpng      openssl     sdl_image   webp
     git        libtiff     pkg-config  sdl_mixer
     gmp        makedepend  portmidi    sdl_ttf

Answer 5

在component.HBS组件文件中创建一个 {{#link-to "routeDestinationYouWant" }}

例如：

<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>

Answer 6

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

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

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

router: service('-routing'),

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

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

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

问题链接：Ember transitionToRoute cleanly in a component without sendAction

链接回答：https://stackoverflow.com/a/41972854/2968465

transitionToRoute（'route'）来自内部组件

6 个答案: