Ember 3+ 从组件到控制器的传递动作不起作用

Question

我们最近从 ember 2+ 转移到 Ember 3.18.0，我正在努力从组件调用控制器功能。在以前的版本中，我们使用 sendAction 来冒泡操作，但现在由于 sendAction 已贬值并且正在使用闭包，我无法正确完成。

下面是我的代码

Controller.hbs

{{generic-err-modal err=receivedErr showDialog= this.showErrorModal onSave=(action "closePromptDialog")}}

Controller.js

@action
closePromptDialog(){
    this.set("showErrorModal",false);
}

Component.hbs

    {{#if @showDialog}}
  <PaperDialog id="genericModal" class="flex-50" @fullscreen={{fullscreen}} @onClose={{action "closePromptDialog"}} @origin={{dialogOrigin}}>
      <PaperDialogContent class="text-align-center">
          {{paper-icon "remove_circle_outline" class="red" size=48}}
      </PaperDialogContent>
      <PaperDialogContent>
        <h2>{{@err.errorMessage}}</h2>
      </PaperDialogContent>

      <PaperDialogActions @class="layout-row">
        <span class="flex"></span>
        <PaperButton @primary={{true}} @onClick={{action "hideModal"}} @raised={{true}}>Ok</PaperButton>
      </PaperDialogActions>

  </PaperDialog>
{{/if}}

Component.js

@action
hideModal(){
    this.args.onSave();
}

关于这个我收到错误消息

Uncaught TypeError: method is not a function

非常感谢任何帮助。

Ember 我使用的版本是 3.18.0

Answer 1

从 Octane 版本开始，Ember 中的一切都变得更加明确，其中之一就是传递函数的 {{action}} 助手。在 classic（pre-octane）模型中，当将字符串传递给 action 助手时，{{action "closePromptDialog"}}、Ember 将在其中搜索操作 closePromptDialog example in the guide.

中提到的相应控制器的 actions 散列

自从引入原生 class 和 @action 装饰器后，我们不必再使用 {{action}} 辅助函数和 actions 哈希。我们可以像 guides of 3.18 中提到的那样直接将方法传递给组件而不需要 action helper。所以，

Controller.hbs:

{{generic-err-modal 
  err=receivedErr   
  showDialog=this.showErrorModal 
  onSave=this.closePromptDialog
}}

此处，this.closePromptDialog 将直接引用支持 class 中的方法，类似于任何其他 class 属性，如 receivedErr，案件。适当的 this 绑定将由 @action 装饰器处理。这同样适用于您在 Component.hbs 文件中的操作。

Ember 3+ 从组件到控制器的传递动作不起作用

Ember 3+ passing action from component to controller not working

components

closures

controller

ember.js