angular - 为什么 Angular 提前输入示例(去抖动)使用 rxjs fromEvent 而不是 Renderer2.listen？

Question

实用 Observables 的 Angular 手册在 type-ahead 中给出了使用去抖动的示例:

const typeahead = fromEvent(searchBox, 'input').pipe(
  map((e: KeyboardEvent) => e.target.value),
  filter(text => text.length > 2),
  debounceTime(10),
  distinctUntilChanged(),
  switchMap(() => ajax('/api/endpoint'))
);

同时，手册的另一部分建议使用 Renderer2.listen()用于 DOM 交互。另外，这个 Medium post有一些非常重要的建议不要直接操作 DOM。

我读过这个相关的 Q&A对于“点击”事件，这可能适用于“输入”事件。

让我烦恼的是，我在整个 Angular 手册中寻找一致的设计理念(而且它有很多)。这感觉不一致。

此外，这两种方法也不完全相同。

在 Renderer2.listen() 的情况下，返回一个 unlisten() 函数以防止内存泄漏。 fromEvent 不是这样。我怀疑 fromEvent 没有泄漏，但我不知道，更重要的是，如果是，为什么手册会推荐这种方法？

最后，我承认这两种方法可能完全没有区别。那么，在这种情况下，手册肯定会偏向于使用 Renderer2。

这让我想问一下，提前输入建议比 listen() 方法更好吗？

---

更新

我很欣赏答案和评论，他们一起为我澄清了一些事情。基本上，在事件模型世界中编码会给开发人员带来很多复杂性。似乎 rxjs 是对那个世界的回应，一种更简单/更干净的消费事件的方式。我也很欣赏基本上说“RTFM”的答案，所以我也去做了。

如果我决定我必须使用 Renderer2.listen()，但我还想利用 Observables 更简单的编程模型，我必须转换 listen() 调用 Observable。我相信它看起来像这样:

new Observable(obs => renderer.listen(el.nativeElement, 'input', e => obs.next(e)))

最后，我想 fromEvent 运算符会在幕后进行操作。

看来 fromEvent 代码的优势还在于我不必将 Renderer2 注入(inject)到我的组件中，我只需要找到 目标 DOM 对象的 ElementRef。关键是，无论哪种方式，我都可以拥有一个 Observable，其中一种更易于描述和编码。

Answer 1

fromEvent 是一个hot Observable，所以它可能会泄漏。为了最佳实践，它必须像大多数 Observable 一样取消订阅。

Renderer2.listen() 似乎设计为在事件发生时采取行动，而使用 fromEvent 您可以对流本身进行更多控制。您可以在您的代码段中更改其行为，使用 debounceTime、filter 等。

因此，使用 fromEvent 可以控制 流，而使用 Renderer2.listen() 可以产生一些副作用等。