Мне нужно снять колесо-исполнитель сразу после его запуска. Я попробовал следующее, но не удалял 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!");
}
}
Какие-либо предложения?
Согласно документам:
Вызов метода 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
Вы можете использовать декодер 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
не поддерживается угловым. Для получения дополнительной информации см. Эту проблему.
Вероятно, проблема заключается в том, что при использовании метода класса в качестве функции обратного вызова this
больше не указывает на класс в функции обратного вызова.
Используйте этот код вместо этого, чтобы добавить слушателя событий:
document.querySelector("#section-one")
.addEventListener("wheel", () => this.myFunction1(), true);
Обратите внимание, что this.myFunction1
стал () => this.myFunction1()
. Другими словами, я завернул имя функции обратного вызова внутри лямбда.
Код для удаления слушателя остается неизменным:
document.querySelector("#section-one").removeEventListener("wheel", this. myFunction1, true);
Наконец, и что самое главное, почему вы используете прослушиватели событий? Это определенно НЕ Угловой способ.
removeEventListener()
действительно принимает как минимум 2 параметра. Таким образом, вы можете сохранить свой оригинальный код для этого.