我有一个包含两个组件的模板,一个文件上传组件和一个显示上传进度的进度条。
{{file-upload}}
{{ember-progress-bar progress=progress}}
我正在使用 ember-uploader。我正在尝试像这样设置进度条的进度:
uploader.on('progress', e => {
// send progress to other component
});
我读到您应该使用操作在组件之间进行通信,但我只能访问上传组件中的 filesDidChange 函数中的进度值,因此我认为我无法在操作中发送它。将此进度值发送到进度条组件的最佳方式是什么?
最佳答案
在这里,我使用上下文组件来为没有父子关系的组件启用组件间通信(一个组件不会在其模板中渲染另一个组件)。
请看一下下面的twiddle我已为您准备好说明我的意思。我创建了模拟 ember-progress-bar
和file-upload
成分。而不是filesDidChange
功能我当然用了click
模拟函数 file-upload
组件,我决定发送 screenX
和screenY
鼠标点击事件的值设置为 ember-progress-bar
组件作为进度。
ember-progress-bar
用作 application.hbs
中的上下文组件;哪里ember-progress-bar
产生 progressUpdated
采取行动 {{yield (hash progressUpdated=(action 'progressUpdated'))}}
在其模板内。 application.hbs
内(其中 ember-progress-bar
以 block 形式使用);检索此产生的操作并将其传递为 onclick
行动到file-upload
组件。
我不知道这对你是否有帮助;但这是我在组件间通信中大量使用的技术。由于上下文组件,我再次依赖于操作(从组件生成并在要使用它的地方以 block 形式使用该组件)。
关于javascript - Ember 中组件之间的通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44761895/