2017-02-28 5 views
0

나는이 같은 HostListener 데코레이터 사용하여 이벤트에 바인딩하는 방법을 알고있는 이벤트 MouseMove 이벤트에 바인딩을 해제하는 방법 :2 각도, 동적 바인딩하고

@HostListener('document:mousemove', ['$event']) 
    onMousemove(event) { 
    //Some code on mouse movement. 
    } 

을하지만 바인딩과 MouseMove 이벤트에 바인딩을 해제 할 수 있도록하고 싶습니다 이벤트는 구성 요소의 라이프 사이클 전체에 걸쳐 간헐적으로 발생합니다. 이런 유형의 바인딩이 무엇인지 불리우고 그것에 대해 아무 것도 찾을 수 없습니다. 기본 JavaScript 이벤트 바인딩을 사용해야합니까?

+1

당신은 더의 컨텍스트를 설명 할 수 문제? – shusson

+0

당신이 절대적으로 등록한다면 자신을 묶을 수 있습니다. 선언적 접근법을 사용한다면 그렇게 할 방법이 없습니다. –

답변

0

아래와 같이 출력 변수를 정의하십시오.

@Output() mouseEvent = new EventEmitter(); 

다음과 같은 이벤트를 내보내려면이 변수를 사용하십시오.

<div (mouseover)="someOverFunction()" 
    (mouseleave)="someLeaveFunction()"> 
     <span *ngIf="mouseOverDiv == true">hello mouseover</span> 
     <span *ngIf="mouseOverDiv == false">hello mouseleave</span> 
</div> 

TS : 당신이 HTML 요소에

<HTMLElement (mouseEvent) = "methodName()"></HTMLElement> 
0

HTML을 추가 할

this.mouseEvent.emit({value:paramValue}); 

전화 마우스 이벤트

mouseOverDiv : boolean = false; 

someOverFunction(){ 
this.mouseOverDiv = true; 
} 

someLeaveFunction(){ 
this.mouseOverDiv = false; 
}