组件内文档上的 Angular 2 事件监听器

Question

我如何在可以由所有文档触发的组件内的 Angular 2 中设置事件监听器 (mouseup)？回调函数将调用组件内部的函数

像这样(在 Javascript 中):

document.addEventListerner('mouseup', function(){
    if( condition ){
       // code ..
    }
});

Answer 1

https://stackblitz.com/edit/angular-host-listener-mouseup?file=src%2Fapp%2Fapp.component.ts

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @HostListener('window:mouseup', ['$event'])
  onMouseUp(event) {
    console.log(event);
  }

}