Puede usar esta sintaxis en su plantilla

 <div (window:keydown)="doSomething($event)">click me<div>

para llamar a este método en su componente

 doSomething($event) { // read keyCode or other properties // from event and execute a command }

Para escuchar en el propio componente host

 @Component({ selector: 'app-component', host: { '(window:keydown)': 'doSomething($event)' }, }) class AppComponent { doSomething($event) { ... } }

o por esta sintaxis equivalente

 @Component({ selector: 'app-component', }) class AppComponent { @HostListener('window:keydown', ['$event']) doSomething($event) { ... } }

Puedes usar una biblioteca que creé llamada angular2-hotkeys

Te permite crear teclas de acceso rápido como esta:

 constructor(private _hotkeysService: HotkeysService) { this._hotkeysService.add(new Hotkey('meta+shift+g', (event: KeyboardEvent) => { console.log('Typed hotkey'); return false; // Prevent bubbling })); }

Una solución simple y elegante se verá como la siguiente: -

Cree un servicio global, que almacenará los enlaces de accesos directos con elementos en los que se puede hacer clic. Nota: - Use NgOnDestroy, para eliminar los enlaces en el componente que se destruye.

Ahora cree una directiva, que tomará códigos clave como entrada como esta.

 <button [angularHotKey]="[17,78]">New Document</button> <!-- CTRL = 17 & n = 78 -->

Ahora, en la mayoría de los componentes raíz, escuche las pulsaciones de teclas y utilícelas como índices para ubicar Elementos en Global Service para HotKeys. Ahora, al obtener la referencia, haga algo como esto.

Supongo que ha formateado códigos de clave grabados en este formato = 1-23-32-... , no olvide ordenarlos en formato ascendente/descendente, tanto al agregarlo a la matriz de pares de claves en servicio como al verificar

 if(this.keypair[combo].length)this.keypair[combo].click();

this.keypair[combo] contiene la referencia del elemento en el que se agregó la angularHotKey directive .

Notas adicionales: 1.) En la directiva angularHotKey al agregar un nuevo par de claves y un elemento/referencia en la que se puede hacer clic, verifique si no existe emparejamiento con el mismo combo, si es así, lance una excepción, será útil durante la depuración y evitará que haga tonterías. errores, y en la clase de componente Angular 2, en el método ngOnDestroy define una lógica de eliminación de todos los accesos directos emparejados con sus elementos secundarios.

Visite http://keycode.info/ para obtener códigos clave para todos los tipos de teclas presentes en su teclado.

Varias teclas de JavaScript presionadas a la vez Una respuesta con cada pequeño detalle sobre cómo lidiar con las pulsaciones de teclas combinadas