时间戳

首页 > 解决方案 > Ember 3+ 将动作从组件传递到控制器不起作用

ember.js - Ember 3+ 将动作从组件传递到控制器不起作用

问题描述

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

下面是我的代码

控制器.hbs

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

控制器.js

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

组件.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}}

组件.js

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

在这我得到错误

Uncaught TypeError: method is not a function

任何帮助将不胜感激。

我使用的 Ember 版本是 3.18.0

标签： ember.jscontrollercomponentsclosures

解决方案

从 Octane 版本开始，Ember 中的一切都变得更加明确，其中之一就是{{action}}传递函数的助手。在经典（pre-octane）模型中，当将字符串传递给actionhelper 时，Ember 将在相应控制器的哈希内{{action "closePromptDialog"}}搜索操作，如指南中的示例所述。closePromptDialogactions

自从引入了原生类和@action装饰器后，我们就不必{{action}}像actionshash 一样使用 helper 了。我们可以直接将方法传递给组件，无需操作助手，如3.18 指南中所述。所以，

控制器.hbs：

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

在这里，this.closePromptDialog将直接引用支持类中的方法，类似于任何其他类属性，例如receivedErr，在您的情况下。正确的this绑定将由@action装饰者负责。这同样适用于您在Component.hbs文件中的操作。

推荐阅读