我已经开始研究Angular2,并基本完成了3个嵌套组件的工作.但是我无法解决如何向文档添加一个按键处理程序.
如果没有,我如何听文本上的按键并对其做出反应？
要清楚,我需要对文档本身做出回应,而不是输入.
在Angular 1中,我将创建一个指令并使用$document;这样的：
$document.on("keydown",function(event) {
// if keycode...
event.stopPropagation();
event.preventDefault();
scope.$apply(function() {
// update scope...
});
但是我还没有找到一个Angular2解决方案.
你可以这样做：
@Component({
host: {
'(document:keyup)': '_keyup($event)','(document:keydown)': '_keydown($event)',},})
export class Component {
private _keydown(event: KeyboardEvent) {
let prevent = [13,27,37,38,39,40]
.find(no => no === event.keyCode);
if (prevent) event.preventDefault();
}
private _keyup(event: KeyboardEvent) {
if (event.keyCode === 27) this.close();
else if (event.keyCode === 13) ...;
else if (event.keyCode === 37) ...;
else if (event.keyCode === 38) ...;
else if (event.keyCode === 39) ...;
else if (event.keyCode === 40) ...;
// else console.log(event.keyCode);
}
}
BTW,角队有一些有趣的ideas about keyboard events,不知道现在的状态是什么.甚至可能it’s working,没有尝试自己:)