基于回调返回Observable

时间:2017-11-29 10:23:00

标签: javascript angular typescript rxjs

我尝试将ngx-chips的工作示例调整为我的需求。这是onRemoving方法示例的样子:

public onRemoving(tag: TagModel): Observable<TagModel> {
        const confirm = window.confirm('Do you really want to remove this tag?');
        return Observable
            .of(tag)
            .filter(() => confirm);
    }

现在而不是windows.confirm我想使用具有AskQuestion方法的自定义组件,其中包含以下签名:

AskQuestion(question: string, yesCallback: () => void, noCallback?: () => void): void {

所以现在我有多个回调,但ngx-chips组件期望我返回一个observable。我尝试使用bindCallback方法将回调转换为observable:

 public onRemoving(tag: TagModel): Observable<TagModel> {

    const choiceCallback = (choice: boolean): TagModel=> {
      if (choice)
        return tag;
    };

    this.questionService.AskQuestion("Remove item?", () => choiceCallback(true), () => choiceCallback(false))

    return Observable.bindCallback(choiceCallback);
  }

但看起来我做错了。有什么想法吗?

2 个答案:

答案 0 :(得分:4)

bindCallback()的定义如下:

  

给它一个类型为f(x,回调)的函数f,它将返回一个函数g,当被调用为g(x)时将输出一个Observable。

您的使用不符合此说明。 choiceCallback()不返回返回可观察对象的函数。

改为使用Observable构造函数:

&#13;
&#13;
public onRemoving(tag: TagModel): Observable <TagModel> {

  return Observable.create(observer => {
    const choiceCallback = (choice: boolean) => {
      if (choice) {
        observer.next(tag);
      }
      observer.complete();
    };

    this.questionService.AskQuestion("Remove item?", () => choiceCallback(true), () => choiceCallback(false));
  });
}
&#13;
&#13;
&#13;

答案 1 :(得分:2)

我不是100%熟悉这个堆栈,但就我所见,看起来像bindCallback会返回一个返回Observabledocs)的函数。

所以也许你需要调用它来获得一个可观察的并在你的返回声明中使用它? 因为在你的函数签名中它会返回一个Observable类型。

您可以尝试通过以下方式替换return语句:
return Observable.bindCallback(choiceCallback)()