アンギュラ私はこのようなHostListenerデコレータを使用してイベントにバインドする方法を知ってどのように動的に結合して、イベント

Question

をMOUSEMOVEするためにアンバインドするには2、：

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

しかし、私はバインドできるようにしたいとのMouseMoveにバインド解除うイベントは、コンポーネントのライフサイクル全体を通じて断続的に発生します。私はこのタイプのバインディングが呼ばれているか分からず、それについて何も見つけることができません。ネイティブのJavaScriptイベントバインディングを使用する必要がありますか？

Answer 1

以下のような出力変数を定義します。

@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> 

Answer 2

HTMLを追加したい

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

コールマウスイベント

mouseOverDiv : boolean = false; 

someOverFunction(){ 
this.mouseOverDiv = true; 
} 

someLeaveFunction(){ 
this.mouseOverDiv = false; 
}