Как удалить EventListeners в угловых 4

1

Мне нужно снять колесо-исполнитель сразу после его запуска. Я попробовал следующее, но не удалял eventlistener.

export class HomeComponent implements OnInit {

    constructor() {}

    ngOnInit() {
       document.querySelector("#section-one").addEventListener("wheel", () => this.myFunction1(), true);
    }

    myFunction1() {
      alert();
      document.querySelector("#section-one").removeEventListener("wheel", this.myFunction1, true);
      console.log("Done!");
    }
}

Какие-либо предложения?

Теги:
angular

3 ответа

3
Лучший ответ

Согласно документам:

Вызов метода removeEventListener() с аргументами, которые не идентифицируют текущий зарегистрированный EventListener в EventTarget, не влияет.

ваш код не должен работать.

Возможное исправление может быть следующим:

wheelHandler: any;

ngOnInit() {
    this.wheelHandler = this.myFunction1.bind(this);
    document.querySelector("#section-one").addEventListener("wheel", this.wheelHandler, true);
}

myFunction1() {
    alert();
    document.querySelector("#section-one").removeEventListener("wheel", this.wheelHandler, true);
    console.log("Done!");
}

где wheelHandler - это функция, относящаяся к тому же экземпляру обработчика

Для более углового способа решения см.

Но useCapture параметр еще не поддерживается. Поэтому он всегда false

  • 0
    Оно работает! благодарю вас.
  • 0
    Вы должны знать, что это не угловой способ добавления и удаления слушателей событий.
Показать ещё 3 комментария
1

Вы можете использовать декодер HostListener, чтобы связать прослушиватель событий, но это работает только для элемента хоста. Если вы хотите добавить и удалить прослушиватель для дочернего элемента, вы должны использовать метод Renderer2.listen. Возвращает функцию удаления прослушивателя событий.

@Component( {
  template: '<div #sectionOne></div>'
})
export class myComponent {
  private _listeners = [];

  @ViewChild('sectionOne')
  public section: ElementRef<any>;

  constructor(private _renderer: Renderer2) {}

  ngAfterViewInit() {
    this._listeners.push(
      this._renderer.listen(this.section.nativeElement, 'click', this.handler.bind(this))
    );
  }

  ngOnDestroy() {
    this._listeners.forEach(fn => fn());
  }

  public handler() {
  }
}

Параметр useCapture не поддерживается угловым. Для получения дополнительной информации см. Эту проблему.

  • 0
    Главное здесь - использовать параметр useCapture. Пожалуйста, добавьте это к вашему примеру. Но попробуйте не переопределить EventManagerPlugin
  • 0
    Да, слушатели пассивных событий не поддерживаются angular, я добавлю заметку.
1

Вероятно, проблема заключается в том, что при использовании метода класса в качестве функции обратного вызова this больше не указывает на класс в функции обратного вызова.

Используйте этот код вместо этого, чтобы добавить слушателя событий:

document.querySelector("#section-one")
  .addEventListener("wheel", () => this.myFunction1(), true);

Обратите внимание, что this.myFunction1 стал () => this.myFunction1(). Другими словами, я завернул имя функции обратного вызова внутри лямбда.

Код для удаления слушателя остается неизменным:

document.querySelector("#section-one").removeEventListener("wheel", this. myFunction1, true);

Наконец, и что самое главное, почему вы используете прослушиватели событий? Это определенно НЕ Угловой способ.

  • 0
    Ошибка: core.es5.js: 1020 ОШИБКА TypeError: Не удалось выполнить «removeEventListener» для «EventTarget»: требуется 2 аргумента, но присутствует только 1. Это ошибка, которую я получаю.
  • 0
    Виноват. Похоже, что removeEventListener() действительно принимает как минимум 2 параметра. Таким образом, вы можете сохранить свой оригинальный код для этого.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню