0

什么是 angular2-way-of-creating-global-keyboard-shortcuts

只有我对将快捷方式绑定到特定元素（或容器，如果你愿意）感兴趣。快捷方式应该只在用户焦点位于元素或他的一个子元素中时起作用，并且当元素从 dom 中删除时，绑定自然应该随之删除。

我找到了一些我觉得不太干净的方法：

/**
* Created by Ziv on 5/23/2016.
*/
import {Injectable} from "angular2/core";

@Injectable()
export class KeyBoardService {

public registerKeyStrokeForElemet(
    strKeyStroke: string,
    fnCallBack: () => void,
    fnIsButtonAvailable: () => boolean,
    element: any,
    bShouldEffectOnlyInContainer: boolean,
    functionThisContext: any): void {

    // Adding tab index property to the container so the events will be raised only when
    // the container is focused
    jQuery(element).prop("tabindex", 1);

    jQuery(element).css("outline", "none");

    jQuery(element).bind(
        'keystrokes', {
            keys: [strKeyStroke]
        }, (e) => {
            // Checking if this event should only happen when the div container is focused
            if (!bShouldEffectOnlyInContainer || jQuery(e.target).is("div")) {
                if (typeof fnIsButtonAvailable !== "function" || fnIsButtonAvailable.apply(functionThisContext, event)) {
                    e.preventDefault();

                    fnCallBack.apply(functionThisContext);
                }
            }
        }
    );

    // If the event should effect all the elements inside the container too,
    // there is a special case when events in jquery keystroke library ignored text inputs.
    // the solution offered by the libraray author is to assign thoose events to them inputs
    // explicitly, which is what were gonna do next
    if (!bShouldEffectOnlyInContainer)
    {
        jQuery(element).find(
                "textarea, :text"
            ).bind(
            'keystrokes',
            {
                keys: [strKeyStroke]
            },
            (e) => {
                if (typeof fnIsButtonAvailable === "function" || fnIsButtonAvailable.apply(functionThisContext, event)) {
                    e.preventDefault();

                    fnCallBack.apply(functionThisContext);
                }
            }
        );
    }
}

}

它依赖于使用 jquery-keystrokes jquery keystrokes 这有点旧，通常我发现在 angular 2 应用程序中使用太多 jquery 很脏，所以我正在寻找“角度方式”来实现这一点

4

1 回答 1

2

这应该让你开始......

要侦听 DOM 元素（例如 a div）上的击键，您可以创建一个属性指令，该指令使用

import {Component, Directive, Input, HostBinding, HostListener} from '@angular/core';

@Directive({selector: '[catchkeys]'}) 
export class CatchKeys {
  // add tabindex attribute so host element (e.g., a div) will receive keyboard events
  // https://stackoverflow.com/questions/10722589/how-to-bind-keyboard-events-to-div-elements
  @HostBinding('tabindex') tabIndex = 1;
  @HostListener('keyup', ['$event'])
  onKeyUp(kbdEvent) {
    console.log(kbdEvent);
  }
}

@Component({
  selector: 'child',
  template: `<div catchkeys>child: {{msg}}
      <div>child element</div>
    </div>`,
  directives: [CatchKeys]
})
class Child {
  @Input() msg:string;
}

Plunker

要过滤特定键，请将列表传递给 CatchKeys 指令：

<div catchkeys="someListOfKeys">

然后修改指令：

@Input() catchkeys:string;  // or maybe use an Array 
ngOnInit() {
  console.log(this.catchkeys);
}
// use this.catchkeys in the onKeyUp() method to filter
于 2016-05-30T15:36:51.323 回答