Angular 2 Tastaturereignisse

Versuchen, zu überwachen, Tastatur-Ereignisse mit Winkel-2 mit Typoskript und Was ist Angular2 Möglichkeit zu schaffen, Globale Tastaturkürzel (shortcuts ein.k.ein. hotkeys)? war hilfreich, aber tslint (codelyzer) Objekte mit der Meldung

In der "@ - Komponente" Klasse decorator du mit "host"
Eigentum, dies gilt als schlechte Praxis. Verwenden Sie "@HostBindings",
"@HostListeners" Eigenschaft Dekorator statt.

Wie verwende ich die empfohlene Dekoratoren? Ich bin mir nicht sicher, wie die Beispiele in Winkel-2: Host-Bindung und Host hören gelten für meinen Anwendungsfall, da bin ich nicht die Bindung an DOM-Elemente.

Hier ist meine 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

Kommentar zu dem Problem - Öffnen
FYI -- die plunker über das oben genannte nicht funktioniert bei mir im IE 11, aber es funktioniert gut in Chrome. Es klemmt beim Laden... Kommentarautor: Christopher Hujanen
host: { '(Fenster:keydown)': 'keyboardInput($event)' } und keyboardInput(event: any) {} ist die Antwort, danke !!! Kommentarautor: Mark Koorevaar

InformationsquelleAutor der Frage james sloan | 2016-04-18

Schreibe einen Kommentar