각도 4의 EventListeners를 제거하는 방법

Question

휠 이벤트 리스너를 발생시킨 후 즉시 제거해야합니다. 나는 다음을 시도했으나 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!"); 
    } 
} 

의견이 있으십니까?

Answer 1

:

Calling removeEventListener() with arguments that do not identify any currently registered EventListener on the EventTarget has no effect.

코드가 작동하지 않을 수 있습니다. 다음

가능한 수정 될 수 wheelHandler가

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!"); 
} 

더 각도 방향 솔루션 핸들러

의 동일한 인스턴스를 참조하는 기능을 참조

• How to listen for mousemove event on Document object in Angular

그러나 AFAIK useCapture 매개 변수는 아직 지원되지 않습니다. 항상 그렇습니다 false

Answer 2

클래스 메서드를 콜백 함수로 사용하면 this은 더 이상 콜백 함수의 클래스를 가리 키지 않습니다.

사용이 코드 대신 이벤트 리스너를 추가합니다 :

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

주 this.myFunction1 그게 () => this.myFunction1()가되었다. 즉, 나는 콜백 함수의 이름을 람다 (lambda) 안에 감쌌다. 마지막으로

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

을, 그리고 가장 중요한, 당신은 왜 그런 이벤트 리스너를 사용하고 있습니다 :

리스너를 제거하는 코드는 동일하게 유지? 이것은 명확하게 Angular 방식이 아닙니다. the docs에 따르면

Answer 3

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() { 
    } 
} 

The useCapture parameter isn't supported by angular by now. For more information, see this issue .