如何在Angular 2中的组件外部获取mouseup

Question

我有一个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知道的东西？还有其他方法吗？

谢谢

Answer 1

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

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

全球听取事件.(body并且也可以document工作).

这当然也适用于组件类

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

Answer 2

在组件内部，它首选执行以下操作：

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

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