如何在Angular 2中的组件之外获取mouseup答案

【问题标题】：How to get mouseup outside of the component in Angular 2如何在Angular 2中的组件之外获取mouseup
【发布时间】：2016-02-09 20:52:02
【问题描述】：

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

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

但是mouseup事件只能在鼠标在<div>里面的时候触发。即使在<div> 之外，如何触发事件？

我是否必须将(mouseup)="mouseUp()" 移至app.ts，然后使用@Output 或service 之类的内容让app.ts 知道？有没有其他办法？

谢谢

【问题讨论】：

标签： angular

【解决方案1】：

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

<div (window:mousedown)="mouseDown()" (window:mouseup)="mouseUp()"></div>

全局监听事件。（body 和 document 也可以）。

这当然也适用于组件类

@HostListener('window:mouseup', ['$event'])
mouseUp(event){}

【讨论】：

对不起，刚下床 ;-) 谢谢指正！

【解决方案2】：

在组件内部，它首选如下操作：

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

这样你就不需要删除ngDestroy上的事件

【讨论】：

【解决方案3】：

组件可以通过window 和document 对象访问事件。所以你可以在组件的构造函数中设置一个事件监听器：

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

【讨论】：

有效！谢谢@MattScarpino，只需将function() {} 更改为() => {}，否则找不到mouseup()。
这个需要退订吗，还是像构造函数里这样就可以了？

【解决方案4】：

有点旧，但这可能会对某人有所帮助，您也可以使用 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();
}

【讨论】：