Question

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

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

但只有鼠标在<div>内时才能触发mouseup事件。如何在<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

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

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

Answer 3

在组件内部，首选其中：

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

通过这种方式，您无需在ngDestroy

上删除该活动

Answer 4

有点老但这可能对某人有帮助，你也可以使用Observable.fromEvent：

sym

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

4 个答案: