我正在尝试将“操作”从 Controller 传递到当前模板的孙组件。但由于某种原因它失败了。谁能告诉我我在这里缺少什么。
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
}
}
最佳答案
您的代码看起来不错。您的 ChildComponent.hbs
文件中存在一个小的@argument 问题。
由于您将参数从 MainTemplate
(save
和 field
)通过 传递给
。 GrandChildComponent
>子组件GrandChildComponent
调用应该类似于,
<!-- ChildComponent.hbs -->
<GrandChildComponent @field={{@field}} @save={{@save}} />
因为这两个属性是 ChildComponent
组件的参数,它不拥有它们。希望这能解决您的问题和这个 cheat sheet帮助我更好地理解辛烷值:)
关于ember.js - 如何将模板中的 "action"传递给它在 Ember Octane 中的子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59727160/