Angular EventEmitter 在回调中不工作

Question

我对 class 中的 EventEmitter 有一个奇怪的问题。虽然我有一些解决问题的想法，但我想问你是否有直接解决我的问题的想法。

简短摘要

我有一个 parent 和一个 child 组件。 parent 组件希望在 child 中的某些内容发生更改时得到通知。

在 child 中，我们有一个按钮。单击时，它会执行修改数据的 http 请求。在subscribe代码部分，我想通知parentclass有些事情已经完成。

问题

在我的应用程序中，只要在 http 请求的 subscribe 中完成，来自 child 组件的事件就永远不会发出。如果我之前发出事件（在订阅函数之外），它会按预期工作。

我试过的

我试图找出原因。问题是我根本无法设法隔离问题。上面的 Stackblitz 按预期工作，而在我的应用程序中几乎相同却没有。

与此问题相关的其他帖子建议在 NgZone 运行程序中执行 .emit()，如下所示：

this.ngZone.run(() => {
  console.log(NgZone.isInAngularZone());
  this.dataHasChanged.emit();
});

我在订阅回调中实现了这个，但结果是控制台记录 true，但测试事件仍然从未发出。

这怎么可能？我能做什么？

编辑

所以我终于能够隔离问题，并在这个非常小的例子中得到了证明：https://stackblitz.com/edit/angular-46pndy

所有问题的原因都在数组的 getter 中。为什么这里会出现问题？

Answer 1

我认为这可能是 Angular 变化检测的奇怪行为。如果禁用更改检测，则会收到事件。

这里实际发生的是，当您使用 getter 创建按钮时，EventEmitter 实际上没有订阅者。分离更改检测可以解决问题，但可能会在您的应用中造成其他副作用。

此 StackBlitz 演示了使用纯管道描述的一种解决方法。

StackBlitz 示例：here