ember.js - 如何将模板中的“动作”传递给 Ember Octane 中的子组件
问题描述
我试图将一个“动作”从控制器传递给当前模板的孙子组件。但由于某种原因它失败了。谁能让我知道我在这里错过了什么。
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
via ChildComponent
。GrandChildComponent
调用应该是这样的,
<!-- ChildComponent.hbs -->
<GrandChildComponent @field={{@field}} @save={{@save}} />
因为这两个属性是ChildComponent
组件的参数并且它不拥有它们。希望这可以解决您的问题,并且此备忘单可以帮助我更好地理解辛烷值 :)
推荐阅读
- hdfs - HDFS 死数据节点
- python - Pyspark:如何从数组中减去双精度(双精度)
- asp.net-core - 为什么我不能通过 NLog 将日志记录保存到数据库?
- python - python基本问题如何在不使用for循环和字符串的情况下在多行中打印名称10次
- reactjs - React +TypeScript - 呈现动态元素问题的组件
- javascript - 如何解除点击事件的绑定?
- kubernetes - 如何在 Prometheus 中删除多个指标
- antlr - 在 ANTLR v3 中消除谓词与门控谓词的歧义
- python - 跨模块的前向引用
- javascript - 将包括图像在内的对象数组发送到 Angular 中的 POST API