kątowe 2 klawiatura Wydarzenia

Question

Próbując monitorować zdarzenia klawiatura z użyciem kątowa 2 maszynopis i What is Angular2 way of creating global keyboard shortcuts (a.k.a. hotkeys)? był pomocny, ale tslint (codelyzer) obiektów z komunikatem

W „@Component” klasy dekoratora używasz „hosta "Właściwość , jest to uważane za złą praktykę. Zamiast tego użyj "@HostBindings", "@HostListeners" dekoratora właściwości.

Jak korzystać z zalecanych dekoratorów? Nie jestem pewien, w jaki sposób przykłady z Angular 2: Host binding and Host listening mają zastosowanie do mojego przypadku użycia, ponieważ nie wiążę żadnych elementów DOM.

Oto moje demo

@Component({ 
    selector: 'my-app', 
template: ` 
    <div> 
     <h2>Keyboard Event demo</h2> 
     Start typing to see KeyboardEvent values 
    </div> 
    <hr /> 
    KeyboardEvent 
    <ul> 
     <li>altKey: {{altKey}}</li> 
     <li>charCode: {{charCode}}</li> 
     <li>code: {{code}}</li> 
     <li>ctrlKey: {{ctrlKey}}</li> 
     <li>keyCode: {{keyCode}}</li> 
     <li>keyIdentifier: {{keyIdentifier}}</li> 
     <li>metaKey: {{metaKey}}</li> 
     <li>shiftKey: {{shiftKey}}</li> 
     <li>timeStamp: {{timeStamp}}</li> 
     <li>type: {{type}}</li> 
     <li>which: {{which}}</li> 
    </ul> 
     `, 
    host: { '(window:keydown)': 'keyboardInput($event)' } 
    /* 
    In the "@Component" class decorator you are using the "host" property, this is considered bad practice. 
    Use "@HostBindings", "@HostListeners" property decorator instead. 
    */ 

}) 
export class App { 

    /* a few examples */ 
    keyboardEvent: any; 
    altKey: boolean; 
    charCode: number; 
    code: string; 
    ctrlKey: boolean; 
    keyCode: number; 
    keyIdentifier: string; 
    metaKey: boolean; 
    shiftKey: boolean; 
    timeStamp: number; 
    type: string; 
    which: number; 

    keyboardInput(event: any) { 
    event.preventDefault(); 
    event.stopPropagation(); 

    this.keyboardEvent = event; 
    this.altKey = event.altKey; 
    this.charCode = event.charCode; 
    this.code = event.code; 
    this.ctrlKey = event.ctrlKey; 
    this.keyCode = event.keyCode; 
    this.keyIdentifier = event.keyIdentifier; 
    this.metaKey = event.metaKey; 
    this.shiftKey = event.shiftKey; 
    this.timeStamp = event.timeStamp; 
    this.type = event.type; 
    this.which = event.which; 
    } 

} 

https://plnkr.co/edit/Aubybjbkp7p8FPxqM0zx

Answer 1

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

@HostListener('window:keydown', ['$event']) 
keyboardInput(event: KeyboardEvent) { 

@HostBindings('attr.foo') foo = 'bar' jest do wiązania wartości z instancji składnika do elementu przyjmującego jak class, cechy, właściwości lub style.