将 Angular EventEmitter.emit() 作为回调传递答案

【问题标题】：Passing Angular EventEmitter.emit() as a callback将 Angular EventEmitter.emit() 作为回调传递
【发布时间】：2020-06-08 01:33:03
【问题描述】：

事件发射器exitEvent 在组件app 中定义。问题是如果通过作为参数传递来调用函数怎么办？

例如

app.component.ts

@Output() readonly exitEvent = new EventEmitter<any>();

...

cancel() {
    const self = this;
    const action = {
      callback: this.exitEvent.emit.bind(self),
      callbackParam: true
    }
    action['callback'](true);
  }

在上面的示例中，调用将无法正确完成并填充如下错误：

ERROR TypeError: "observers is undefined"
    next RxJS
    emit Angular

【问题讨论】：

你的用例是什么？

标签： angular dependency-injection callback closures

【解决方案1】：

如您所见，emit 方法是在 observable 本身的上下文而不是您的组件上下文中调用的。所以将它绑定到this aka self 是不正确的。您的代码的正确实现应如下所示：

@Output() readonly exitEvent = new EventEmitter<any>();

...

cancel() {
    const self = this;
    const action = {
      callback: this.exitEvent.emit.bind(this.exitEvent), // <-- Main change here
      callbackParam: true
    }
    action['callback'](true);
  }

在这里你可以找到一些working example。但是，我无法想象你在哪里需要这样的实现。

【讨论】：

谢谢，我已经删除了参数并硬编码为行动。因此，在实际场景中，在同一个 UI 中取消某些内容但在条件下采用不同的参数更为通用。

【解决方案2】：

您的用例到底是什么？您可以使用这样的东西来保留原始上下文

  const action = {
    callback: (p) => this.exitEvent.emit(p),
    callbackParam: true
  }
  action['callback'](true);

【讨论】：