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

Question

我试图将一个"action“从控制器传递给当前模板的孙子组件。但它在somereason上失败了。谁能让我知道我错过了什么。

​

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文件中有一个小的@参数问题。

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

<!-- ChildComponent.hbs  -->

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

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