Question

我知道如何使用HostListener装饰器绑定到事件，如下所示：

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

但我希望能够在组件的整个生命周期中间歇性地绑定和取消绑定到mousemove事件。我不知道这种类型的绑定是什么，我找不到任何关于它的东西。我应该尝试使用本机JavaScript事件绑定吗？

Answer 1

定义如下的输出变量。

 @Output() mouseEvent = new EventEmitter();

如果要发出如下所示的事件，请使用此变量。

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

调用要在html元素中添加的鼠标事件

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

Answer 2

HTML：

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

TS：

mouseOverDiv : boolean = false;

someOverFunction(){
 this.mouseOverDiv = true;  
}

someLeaveFunction(){
 this.mouseOverDiv = false;  
}

Angular 2，如何动态绑定和取消绑定到mousemove事件

2 个答案: