Как передать "действие" из шаблона в его основные дочерние компоненты в Ember Octane

Question

Я пытаюсь передать "действие" от контроллера к внучатому компоненту текущего шаблона. Но по какой-то причине это не удается. Может ли кто-нибудь сообщить мне, что мне здесь не хватает.

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

Ваш код выглядит нормально. Есть небольшая проблема с @argument в вашемChildComponent.hbs файл.

Поскольку вы передаете аргумент из MainTemplate (save а также field) к GrandChildComponent через ChildComponent. ВGrandChildComponent вызов должен быть чем-то вроде,

<!-- ChildComponent.hbs  -->

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

поскольку эти два свойства являются аргументом ChildComponentкомпонент и не владеет ими. Надеюсь, это решит вашу проблему, и этот чит-лист помог мне лучше понять октан:)