Question

我在项目中使用了名为froala的第三方文本编辑器，并且对于keyup事件，我必须传递一个回调函数，以便可以从编辑器中获取值。我试图以某种可观察的方式包装回调函数，以便可以使用debounceTime，但是我无法使其正常工作，下面是一些代码：

在我的组件文件中：

export class EditorComponent
  editorOptions = {
    events: {
      'froalaEditor.keyup': (e, editor) => {
        do stuff here
      },
    }
  };
}

我试图在keyup事件中使用它，但是它无法正常工作，因为它为每个事件设置了一个新的可观察对象：

'froalaEditor.keyup': (e, editor) => {
  const text = editor.html.get();
  Observable.create(o => {
    this.service.updateData(data);
  }).pipe(takeUntil(this.ngUnsubscribe))
    .pipe(debounceTime(1000))
    .subscribe();
}

什么是使这项工作正确的方法？

Answer 1

您可以创建一个独立的Subject并将值推入其中，例如：

export class EditorComponent
  private onKeyup$ = new Subject();

  editorOptions = {
    events: {
      'froalaEditor.keyup': (e, editor) => {
        onKeyup$.next(e);
      },
    }
  };
}

重要：在这种情况下，您必须自己关心订阅的完成。在适合您特定框架的组件中搜索可观察的适当完成。

OR

如果您引用了编辑器DOM节点，则可以在froala事件froalaEditor.keyup上使用fromEvent（请参见froala docs）。

例如

const onKeyup$ = fromEvent(froalaDOMNode, 'froalaEditor.keyup');

在这种情况下，一旦DOM节点被破坏，observable将完成，因此您不必担心手动取消订阅。

如何将第三方事件绑定到可观察的rxjs

1 个答案: