bindCallback 只发出一次答案

【问题标题】：bindCallback emit only oncebindCallback 只发出一次
【发布时间】：2020-04-21 16:02:53
【问题描述】：

在使用 RXJS 的 Angular 中，类中有以下代码：

static on = (event: string, callback: (e: any) => void) => {
    switch (event) {
        case EVENTS.CONNECT.ALIAS:
            return emitter.subscribe(EVENTS.CONNECT.ALIAS, callback);
        case EVENTS.DISCONNECT.ALIAS:
            return emitter.subscribe(EVENTS.DISCONNECT.ALIAS, callback);
        case EVENTS.BUTTON_PRESS.ALIAS:
            return emitter.subscribe(EVENTS.BUTTON_PRESS.ALIAS, callback);
        case EVENTS.AXIS_MOVEMENT.ALIAS:
            return emitter.subscribe(EVENTS.AXIS_MOVEMENT.ALIAS, callback);
    }
}

这基本上将回调添加到指定事件监听器的回调列表中。（问题不在这里）

在我的 Angular 应用程序中，我的服务中有以下代码：

  addListener(eventName: string): Observable<GamepadEvent> {
    return bindCallback<string, GamepadEvent>(JoypadService.on)(eventName);
  }

在我做的一个组件中：

  ngOnInit() {
    this.gamepadService.addListener(EVENTS.AXIS_MOVEMENT.ALIAS).subscribe(res => {
      console.log(res);
    });
  }

我面临的问题是对 observable 的订阅只触发一次，但是如果我添加以下行并且不使用 bindCallback:

 addListener(eventName: string): Observable<GamepadEvent> {
    JoypadService.on(eventName, (e) => console.log(e))
    return bindCallback<string, GamepadEvent>(JoypadService.on)(eventName).pipe(
      takeUntil(this.unsubscribe)
    );
  }

这个 JoypadService.on(eventName, (e) => console.log(e))` 将在发生更改时触发（应该如此）。

显然 bindCallback 只触发一次，但是是否可以让它无限触发直到取消订阅？

【问题讨论】：

标签： angular rxjs

【解决方案1】：

来自bindCallback的rxjs文档

请注意，由输出函数创建的 Observable 将始终发出单个值，然后立即完成。

在您的代码的最后一个版本中，您最终会在任何时候调用addListener(eventName: string) 时创建一个新的 Observable。这些 Observable 中的任何一个都只会发射一次。

如果你想创建一个多次通知直到被取消订阅的 Observable，你可能应该查看 Observable 的构造函数。

在您的情况下，代码可能如下所示

createMyObs = (event: string): Observable<any> => {
    return new Observable(
        (observer: Observer<any>): TeardownLogic => {
            JoypadService.on(event, (e: any) => {
               observer.next(e)
            }
            // you can return here a function called upon unsubscription to
            // do any cleanup (i.e. the teardown logic)
        },
    );
};

这样你就可以创建一个单独的 Observable 来表示事件流。

【讨论】：