如何使用onRelease组件处理ionic2事件？

Question

我正在尝试创建一个类似于WhatsApp语音提示按钮的按钮。onHold，声音在录音，onRelease，你可以做任何事情。

我在ionic2 文档搜索。我确实找到了处理onRelease事件的任何指令。

我找到了一块工作正常的东西。

  @Output('long-press') onPress: EventEmitter < any > = new EventEmitter();
  @Output('long-press-up') onPressUp: EventEmitter < any > = new EventEmitter();




  ngOnInit() {
    this.pressGesture = new Gesture(this.htmlElement);
    this.pressGesture.listen();

    this.pressGesture.on('press', (event) => {
      this.recordVoice();
      this.onPress.emit(event);
    });

    this.pressGesture.on('pressup', (event) => {
      this.stopRecording();
      this.onPressUp.emit(event);
    });
  }

组件

        <button type="button" clear item-right (long-press)="longPressed()" (long-press-up)="longPressReleased()">
          <ion-icon name="mic"></ion-icon>
        </button>

但问题是，当我拿着屏幕this.recordVoice()被执行的任何地方时，一旦我释放手指，this.stopRecording()就会执行。

我需要只为按钮而不是整个页面执行onPress和onPressUp。

所以我如何修改上面的代码来修正我所需要的。

谢谢。

Answer 1

我有同样的需求，我最终使用了这个插件：https://github.com/wbhob/ionic-long-press。

然后你就可以这样做：

<button ion-button 
    ion-long-press 
    [interval]="400" 
    (onPressStart)="recordVoice()" 
    (onPressing)="recording()" 
    (onPressEnd)="stopRecording()"></button>