stream - 如何制作长按按键时触发的KeyboardEvent流？ ( Dart )

Question

长按某些html元素中的键时，如何触发触发的KeyBoardEvent流。

同样，我对Angular2指令(longpress)(具有相同的想法)也很感兴趣。

Answer 1

@Directive(
    selector: '[longpress]')
class LongPress {
  @Output() EventEmitter<KeyboardEvent> longpress =
      new EventEmitter<KeyboardEvent>();

  KeyboardEvent _startEvent;
  @Input() Duration longpressDelay = new Duration(seconds: 2);
  Timer timer;

  @HostListener("keydown", const [r"$event"])
  @HostListener("keyup", const [r"$event"])
  void keyEventHandler(KeyboardEvent event) {
    if (_startEvent == null ||
        _startEvent.type != event.type ||
        _startEvent.keyCode != event.keyCode) {
      if (timer != null) {
        timer.cancel();
      }
      _startEvent = event;

      if(event.type == 'keyup') {
        timer = new Timer(longpressDelay, () {
          longpress.add(_startEvent);
          timer = null;
        });
      }
    }
  }
}

并像这样使用

<label for="input">Longpress: </label><input id="longpress" longpress (longpress)="longPressed($event)">

我还没有想办法使指令选择器与(...)一起使用，所以它也可以正常工作:

<label for="input">Longpress: </label><input id="longpress" (longpress)="longPressed($event)">

事件处理(preventDefault)似乎无法正常工作。
将此指令添加到<input>会中断输入的编写。

解决方法是改用这种方式订阅keydown / keyup

LongPress(ElementRef elementRef) {
  (elementRef.nativeElement as Element).onKeyDown.listen(keyEventHandler);
  (elementRef.nativeElement as Element).onKeyUp.listen(keyEventHandler);
}