如何在Angular 2中使鼠标悬停在组件外部

我有一个abc组件（页面的一部分）。它有一个事件鼠标

@Component({
    selector: 'abc-component'
})
@View({
    <div (mousedown)="mouseDown()" (mouseup)="mouseUp()"></div>
})
export class ScheduleComponent {
    mouseDown(){
        //doSomthing
    }
    mouseUp(){}
}

@组件({
选择器：“abc组件”
})
@看法({
})
导出类ScheduleComponent{
mouseDown（）{
//多索姆廷
}
mouseUp（）{}
}

但mouseup事件只能在鼠标位于

内时触发。如何在

之外触发事件

我是否必须将

（mouseup）=“mouseup（）”

移动到app.ts，然后使用类似

@Output

或

service

的方法让app.ts知道？还有别的办法吗

---

感谢组件可以通过

窗口
和
文档
对象访问事件。因此，您可以在组件的构造函数中设置事件侦听器：

constructor() {
  document.body.addEventListener("mouseup", () => { 
    this.mouseup(); 
  });
}

添加一个全局事件目标，如



收听全球范围内的活动。（
正文
和
文档
也起作用）

这当然也适用于components类

@HostListener（'window:mouseup'，['$event']））
鼠标（事件）{}
在组件内部，最好执行以下操作：

@HostListener('document:mouseup', ['$event'])
onMouseUp(event: MouseEvent) {
  ...
}

这样，您就不需要删除
ngDestroy
上的事件，但这可能会对某些人有所帮助，您也可以使用Observable.fromEvent：

ngOnInit() {
  this.mouseUpSubscription = Observable.fromEvent(window, "mouseup")
    .throttleTime(30) // throttle time in ms, optional
    .subscribe(res => {
      this.mouseUpHandler(res);
    });
}

ngOnDestroy() {
  this.mouseUpSubscription.unsubscribe();
}

它起作用了！谢谢，@MattScarpino，只需将
function（）{}
更改为
=>{}
，否则它就找不到
mouseup（）
。对不起，刚起床；-）谢谢你的更正！