Question

我想使用德语键盘处理shift和asterisk-key的组合来处理keydown事件。

此时我可以使用的任何其他组合：

 <span class="template-row"
  (click)="passPreviewForDisplay()"
  (keydown.enter)="addTemplateToFroala()"
  (keydown.control.shift.f)="handle($event)"
  (keydown.arrowleft)="closeTree($event)"
  (keydown.arrowright)="openTree($event)">
  {{template.name}}
</span>

这是我处理简单案例的例子。我没有设法找到keydown事件的所有可用组合，也找不到像keydown.control.shift这样的处理信息。*。我强调它应该从德语键盘调用。 https://en.wikipedia.org/wiki/German_keyboard_layout#/media/File:German-T2-Keyboard-Prototype-May-2012.jpg 关键是Ü旁边（右侧）。

Answer 1

Angular只提供键子集的简写，你应该只监听任何keydown事件并使用键盘事件在代码中找出它。

<span class="template-row"
  (click)="passPreviewForDisplay()"
  (keydown.enter)="addTemplateToFroala()"
  (keydown.control.shift.f)="handle($event)"
  (keydown.arrowleft)="closeTree($event)"
  (keydown.arrowright)="openTree($event)"
  (keydown)="checkAsterisk($event)">
  {{template.name}}
</span>

控制器中的

：

const ASTERISK_CODE = 999; //I don't actually know the keycode for the german asterisk but you could find it easily by logging a keydown event from that key
checkAsterisk(kb: KeyboardEvent) {
    if (kb.shiftKey && kb.keyCode === ASTERISK_CODE) {
       console.log('asterisk poressed');
    }
}

如果您需要在应用程序中执行此操作，则可以非常轻松地制定指令：

const ASTERISK_CODE = 999; //I don't actually know the keycode for the german asterisk but you could find it easily by logging a keydown event from that key
@Directive({
   selector: '[asteriskPress]',
   host: { '(keydown)': 'checkAsterisk($event)' }
})
export class AsteriskPressDirective {
    @Output() asteriskPress: EventEmitter<KeyboardEvent> = new EventEmitter<KeyboardEvent>();

    checkAsterisk(kb: KeyboardEvent) {
       // check if shift key pressed and keyCode is asterisk
       if (kb.shiftKey && kb.keyCode === ASTERISK_CODE) {
         this.asteriskPress.next(kb);
       }
    }
}

然后在模板中使用它（在正确声明/导出/导入等之后）：

<span class="template-row"
  (click)="passPreviewForDisplay()"
  (keydown.enter)="addTemplateToFroala()"
  (keydown.control.shift.f)="handle($event)"
  (keydown.arrowleft)="closeTree($event)"
  (keydown.arrowright)="openTree($event)"
  (asteriskPress)="reactToPress($event)">
  {{template.name}}
</span>

Angular 2+ keydown与德语键盘的“*”星号键组合

1 个答案: