Angular2有相当于$的文档

发布时间：2020-12-17 07:38:07 所属栏目：安全来源：网络整理

导读：我已经开始研究Angular2,并基本完成了3个嵌套组件的工作.但是我无法解决如何向文档添加一个按键处理程序. 如果没有,我如何听文本上的按键并对其做出反应？要清楚,我需要对文档本身做出回应,而不是输入. 在Angular 1中,我将创建一个指令并使用$document;这样

我已经开始研究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,没有尝试自己:)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!