Может ли Рендерер2.listen() Angular иметь несколько целей?

#angular #angular-renderer2

Вопрос:

Я вручную добавляю и удаляю списки событий на DOM-элементах из соображений производительности из зоны NG в Angular. Моя реализация кажется прекрасной, и в настоящее время я пытаюсь переработать код, чтобы он был СУХИМ и более читаемым. Теперь мой вопрос в том, есть ли способ передать несколько DOM-элементов в Renderer2.listen() функцию. Так что в принципе я хочу сделать что-то вроде этого:

 this._unlisten['mouseup'] = this._renderer.listen(
   this.elementView.nativeElement, // <- Can I pass more elements than just elementView?
   'mouseup',
   (event) => {
       unlistenToTheEventOnSeveralElements(event)
   }
)
 

Заранее спасибо за любые идеи или предложения.

Ответ №1:

Из угловой документации:

Контекст, в котором следует прислушиваться к событиям. Может быть все окно или документ, текст документа или определенный элемент DOM.

Если вам нужно прослушать несколько щелкаемых элементов, вам следует использовать rxjs из события и объединить все события с помощью слияния, подобного этому:

 merge(fromEvent(firstElement, 'click'), fromEvent(secondElement, 'click'))
  .pipe(takeUntil(/* destroy subject */)
  .subscribe(event => unlistenToTheEventOnSeveralElements(event))
 

Вот пример приложения, чтобы вы могли увидеть его в действии: stackblitz