我正在寻找一种方法将函数绑定到我的整个页面(当用户按下一个键时,我希望它在我的component.ts中触发一个函数)
在AngularJS中使用ng-keypress
很容易,但它不适用于(keypress)="handleInput($event)"
。
我在整个页面上使用div包装器尝试了它,但它似乎不起作用。它只适用于焦点在它上面。
<div (keypress)="handleInput($event)" tabindex="1">
我会在你的组件中使用@HostListener装饰器:
import { HostListener } from '@angular/core';
@Component({
...
})
export class AppComponent {
@HostListener('document:keypress', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
this.key = event.key;
}
}
还有其他选项,如:
@Component
装饰中的主机属性
Angular建议在主机属性@HostListener
上使用https://angular.io/guide/styleguide#style-06-03装饰器
@Component({
...
host: {
'(document:keypress)': 'handleKeyboardEvent($event)'
}
})
export class AppComponent {
handleKeyboardEvent(event: KeyboardEvent) {
console.log(event);
}
}
renderer.listen
import { Component, Renderer2 } from '@angular/core';
@Component({
...
})
export class AppComponent {
globalListenFunc: Function;
constructor(private renderer: Renderer2) {}
ngOnInit() {
this.globalListenFunc = this.renderer.listen('document', 'keypress', e => {
console.log(e);
});
}
ngOnDestroy() {
// remove listener
this.globalListenFunc();
}
}
Observable.fromEvent
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import { Subscription } from 'rxjs/Subscription';
@Component({
...
})
export class AppComponent {
subscription: Subscription;
ngOnInit() {
this.subscription = Observable.fromEvent(document, 'keypress').subscribe(e => {
console.log(e);
})
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
yurzui的回答对我不起作用,它可能是一个不同的RC版本,或者它可能是我的错误。无论哪种方式,这是我在Angular2 RC4中使用我的组件的方式(现在已经过时了)。
@Component({
...
host: {
'(document:keydown)': 'handleKeyboardEvents($event)'
}
})
export class MyComponent {
...
handleKeyboardEvents(event: KeyboardEvent) {
this.key = event.which || event.keyCode;
}
}
如果要在任何特定键盘按钮上执行任何事件,在这种情况下,您可以使用@HostListener。为此,您必须在组件ts文件中导入HostListener。
从'@ angular / core'导入{HostListener}; 然后在组件ts文件中的任何位置使用以下函数。
@HostListener('document:keyup', ['$event'])
handleDeleteKeyboardEvent(event: KeyboardEvent) {
if(event.key === 'Delete')
{
// remove something...
}
}