如何将 "action" 从模板传递给它在 Ember Octane 中的孙子组件

Question

我正在尝试将 "action" 从控制器传递到当前模板的孙组件。但由于某种原因它失败了。谁能告诉我我在这里遗漏了什么。

MainTemplate's Router Controller

export default class MainTemplateController extends Controller {

  field = "userId";

  @action
  save () {
    //save data
  }

}

MainTemplate.hbs

<ChildComponent @field={{this.field}} @save={{this.save}} /> 


ChildComponent.hbs 

<GrandChildComponent @field={{this.field}} @save={{this.save}} />


GrandChildComponent.hbs

<button @onClick={{action "doSomething" (readonly @field)}}>Save</button>

export default class GrandChildComponent extends Component {    
    @action
    doSomething(fieldName) {
        console.log(fieldName); // logs as "userId"
        console.log(this.args.save) // undefined
    }    
}

Answer 1

您的代码看起来不错。您的 ChildComponent.hbs 文件中存在一个小的@argument 问题。

因为您要通过 ChildComponent 将参数从 MainTemplate（save 和 field）传递到 GrandChildComponent。 GrandChildComponent 调用应该是这样的，

<!-- ChildComponent.hbs  -->

<GrandChildComponent @field={{@field}} @save={{@save}} />

因为这两个属性是 ChildComponent 组件的参数，它不拥有它们。希望这能解决您的问题，并且 cheat sheet 帮助我更好地理解 octane :)

如何将 "action" 从模板传递给它在 Ember Octane 中的孙子组件

How to pass an "action" from a template to it's grand child components in Ember Octane

ember.js

ember-octane