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

问题描述

我有一个 abc 组件(页面的一部分).它具有事件mouseup.

I have a abc component (part of the page). It has an event mouseup.

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

但是mouseup事件只能在<div>内部的鼠标时触发.即使在<div>之外，如何触发事件?

But the mouseup event can only trigger when the mouse inside of the <div>. How can I trigger the event even outside of the <div>?

我是否必须将(mouseup)="mouseUp()"移至 app.ts ，然后使用类似@Output或service的方式通知 app.ts ?还有其他办法吗?

Do I have to move (mouseup)="mouseUp()" to app.ts and then use something like @Output or service to let app.ts know? Is there any other way?

谢谢

推荐答案

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

Add a global event target like

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

全局收听事件. (body和document也可以工作).

to listen to events globally. (body and document work as well).

这当然也可以在组件类中使用

This works of course also in the components class

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

这篇关于如何在Angular 2中的组件之外获取mouseup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！