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

Question

我想使用德语键盘结合 Shift 和星号键来处理 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 key 位于 Ü 旁边(右侧)。

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>

在 Controller 中:

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>