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

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);
      },
    }
  };
}

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

或

如果你有对编辑器 DOM 节点的引用——你可以在 froala 事件froalaEditor.keyup上使用 fromEvent(参见 froala 文档(。

例如

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

在这种情况下，一旦 DOM 节点被销毁，可观察性就会完成，因此您不必担心手动取消订阅。