Как привязать стороннее событие к наблюдаемому rxjs - PullRequest
Новая
       13

Как привязать стороннее событие к наблюдаемому rxjs

1 голос
/ 27 марта 2019

Я использую сторонний текстовый редактор 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();
}

Как правильно сделать эту работу?

1 Ответ

1 голос
/ 27 марта 2019

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

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

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

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

OR

Если у вас есть ссылка на узел DOM редактора - вы можете использовать fromEvent для события froala froalaEditor.keyup (см. froala docs ).

* 1023 Е.Г. * 

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

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

...