Блог

Я использую сторонний текстовый редактор froala в проекте, и для события keyup мне нужно передать функцию обратного вызова, чтобы я мог получить значение обратно из редактора. Я пытаюсь каким-то образом обернуть функцию обратного вызова в observable, чтобы я мог использовать 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();
}
  

как правильно заставить это работать?

Вы могли бы создать автономный файл Subject и вставить в него значения, например:

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

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

Важно: в этом случае вам придется позаботиться о завершении подписки самостоятельно. Найдите надлежащее наблюдаемое завершение в компонентах для вашей конкретной платформы.

или

Если у вас есть ссылка на узел editor DOM — вы могли бы использовать fromEvent событие froala froalaEditor.keyup (см. Документы froala).

Например.

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

В этом случае observable завершится после уничтожения узла DOM, поэтому вам не придется беспокоиться об отмене подписки вручную.