Шаблон для автоматической очистки обработчиков событий, аналогично подпискам - PullRequest
Новая
       96

Шаблон для автоматической очистки обработчиков событий, аналогично подпискам

0 голосов
/ 29 октября 2019

Я знаком с шаблонами, которые используются для очистки подписок на наблюдаемых, как описано здесь: Angular / RxJs Когда мне следует отписаться от Subscription

НоЕсть ли подобный шаблон для очистки обработчиков событий?

У меня есть компонент, который модифицирует динамически предоставленный шаблон для применения некоторых обработчиков событий к различным элементам, среди прочего. Существуют и очищаются другие подписки, используя ngrx-take-until-destroy, что упрощает все. В настоящее время я просто поддерживаю отдельный массив Unsubscribable для сбора и очистки после уничтожения. 

@Component(...)
class MyComponent implements OnInit, OnDestroy {
  constructor(private renderer: Renderer2, private service: SomeService) {}
  private subscriptions: Unsubscribable[] = [];

  ngOnInit() {
    this.service.doSomething(...).pipe(
      untilDestroyed(this)
    ).subscribe(...);
  }

  private setTagLink(
    element: Element,
    clickHandler: (event: any) => (boolean|void)
  ) {
    this.subscriptions.push({
      unsubscribe: this.renderer.listen(element, 'click', clickHandler)
    });
  }

  ngOnDestroy() {
    this.subscriptions.forEach(s => s.unsubscribe());
  }
}

Я бы предпочел не поддерживать этот массив и аналогичным образом иметь некоторую автоматическую очистку слушателей. ,Какие у меня варианты?

Ответы [ 3 ]

0 голосов
/ 31 октября 2019

Я думаю, вы могли бы использовать fromEvent для создания Observables, которые слушают события вместо Renderer2.listen. А затем просто используйте тот же шаблон отписки, который вы используете для других Observables.

Что-то вроде: 

import { fromEvent } from 'rxjs';

private setTagLink(
  element: Element,
  clickHandler: (event: any) => void
) {
  fromEvent(element, 'click').pipe(
    untilDestroyed(this)
  ).subscribe(clickHandler);
}
0 голосов
/ 01 ноября 2019

При поиске чего-то похожего я наткнулся на два варианта:

  • Использование библиотеки subsink , которая в основном делает то, что вы делаете, но менее многословно.
  • Создание собственного декоратора отписки, который делает грязную работу, учебник Натанель Базель можно найти здесь
0 голосов
/ 30 октября 2019

Вам не нужно очищать обработчики событий для элементов DOM, которые являются частью компонента, вам нужно будет очистить обработчик событий только в том случае, если элемент DOM все еще активен после уничтожения компонента.

Причина, по которой вам нужно очистить подписки на наблюдаемые, возвращаемые из служб, заключается в том, что на эти наблюдаемые по-прежнему ссылаются после уничтожения компонента. Если у вас есть наблюдаемая, созданная компонентом, то вы можете позволить всему компоненту попасть в сборщик мусора, не беспокоясьо подписках. То же самое для элементов DOM.

...