typescript - Angular 2 Hendelseslytter på dokumentet inne i en komponent

Hvordan kan jeg sette opp en hendelseslytter (mouseup) i Angular 2 inne i en komponent som kan utløses av hele dokumentet? Tilbakekallingsfunksjonen vil kalle en funksjon inne i komponenten.

Noe sånt som dette (i Javascript):

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

Svar #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);
  }

}

Svar #2

Legg til en HostListener for å registrere en hendelse på dokumentobjektet

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

inni komponenten

  @HostListener('mouseup', ['$event'])
  mouseUp(ev:KeyboardEvent) { 
    console.log(ev);
  }

Relaterte artikler