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 钥匙在 Ü 旁边（在右侧）。

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>