ember.js - Ember 无法将路由操作传递给组件

Question

我有一个组件需要接收我放置在路线上的操作，因为它的工作是刷新模型的一部分。

显然我可以从按钮调用路由操作，但我无法将相同的操作传递给组件。

The router

export default Ember.Route.extend({
    actions: {
        doSomething: function(){
            alert('Router handled!');
        }
    }
});

The page template

<button {{action "doSomething"}}>speak</button>
{{myComponent onGetUsers=(action "doSomething")}}

The component

export default Ember.Component.extend({
    actions: {
        onPageClicked: function(pageNo){
            this.sendAction('onGetUsers', pageNo);
        }
    }
});

按钮单击有效。当我使用该组件时，我会执行它的操作，但 sendAction 永远不会工作或触发。

是否有规则不能将操作传递给下线组件？还是我在代码中做错了什么？

Answer 1

sendActions - 可用于组件到组件的通信。send - 可用于 Controller 路由通信。
你不能使用任何一种方式。

对于组件路由通信，您可以使用以下插件。

ember install ember-route-action-helper

通过在 route 中定义 action，可以从 template.hbs 中调用

<button {{action (route-action 'appRouteAction' 'fromApplication.hbs') }}>button</button>

您可以从 my-component.hbs 调用

<button {{action (route-action 'appRouteAction' 'from MyComponent.hbs') }}>My-Component button</button>

如果您想先调用组件操作，然后再调用路由中的操作，

在 template.hbs - 包含带有路由 Action 的组件作为关闭 Action ，

{{my-component2 appRouteAction=(route-action 'appRouteAction')}}

在 my-compoent2.hbs 中，

<button {{action 'appRouteAction' 'CallFromComponentActions-my-compoent2.hbs' }}>CallFromComponentActions</button>

在 my-compoent2.js

import Ember from 'ember';
export default Ember.Component.extend({
  actions:{
    appRouteAction(fromWhere){
      console.log('appRouteAction in my-component ');
      this.get('appRouteAction')(...arguments);
    }
  }
});

Sample Twiddle - 玩转 ember-route-action-helper-addon。