Angular中带有输出EventEmitter的RxJS fromEvent运算符答案

【问题标题】：RxJS fromEvent operator with output EventEmitter in AngularAngular中带有输出EventEmitter的RxJS fromEvent运算符
【发布时间】：2018-03-12 04:16:32
【问题描述】：

假设ChildComponent 发出一个名为someEvent 的事件。显然，我可以在ParentComponent 中捕获事件，声明为<child-component (someEvent)="onSomeEvent($event)"></child-component>，并使用ParentComponent 中的方法onSomeEvent 处理它。但我正在尝试的是我想在 RxJS 中使用 fromEvent 运算符处理事件。在获得ChildComponent 的ElementRef 和@ViewChild 之后，我尝试了fromEvent(this.childComponent.nativeElement, 'someEvent')。我发现如果输出 EventEmitter 的事件名称与 click 等本机事件之一相同，则上述方法有效，但否则它不会响应/工作。有什么方法可以让它与fromEvent 一起工作吗？

【问题讨论】：

为什么要使用fromEvent？您是否尝试将 Angular 事件转换为 observable？
@cartant 实际上，使用fromEvent 并不是必需的，但我正在尝试以这种方式处理使用 rxjs 运算符的流程
@cartant 你介意重新发布你的答案吗？我很困惑。它仍然无法正常工作。
我已取消删除答案。避免直接访问 Angular 和 not treating event emitters as observables 中的原生元素是有充分理由的。
@cartant 我认为直接在 Angular 中访问本机元素还不错，除非我对其进行操作。为什么不好？

标签： angular rxjs

【解决方案1】：

如果您想将事件转换为可观察的，您可以使用Subject，如下所示：

@Component({
  selector: 'parent-component',
  template: `
    <child-component (someEvent)="subject.next($event)">
    </child-component>
  `
})
export class ParentComponent {
  public subject = new Subject<any>();
  constructor() {
    this.subject.pipe(
      tap(event => console.log(event)) // or whatever
    ).subscribe();
  }
}

这样做将为您提供一个可观察的源 - 主题 - 它发出事件发射器发出的任何值。从中你可以使用 RxJS 操作符来组合你想要的任何东西。

【讨论】：

那么除了使用Subject之外，没有办法将Component event(output EventEmitter) 与fromEvent 运算符绑定？根据您的建议，我可以随意使用 rxjs 运算符，但我需要看似额外的 Subject 变量来完成我想要的。
即使可以，也不应该。 carant 的解决方案是您应该使用的正确解决方案。
@IngoBürk 显然，我可以直接订阅someEvent。我为什么要为此设置一个额外的主题？
@DongBinKim 因为EventEmitter is not guaranteed to be implemented as an observable。它是一个可观察的是一个实现细节。