В руководстве Angular для Practical Observables приведен пример использования debounce в type-forward :
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 в мой компонент, мне нужно только найти ElementRef для целевого объекта DOM.Дело в том, что я могу иметь Observable в любом случае, один из которых намного проще описать и кодировать.