如何使用 rxjs / angular observable 发布一个值答案

【问题标题】：how to use rxjs / angular observable to publish a value如何使用 rxjs / angular observable 发布一个值
【发布时间】：2018-08-27 07:00:25
【问题描述】：

我正在玩弄 ionic（基于 angular 构建的框架），我对 rxjs 的 Observable 模式有点困惑。我有以下情况：

我想创建一个服务来保存“实时”更新计数器，比如说未读消息。
我想要一个外部影响来改变这个值，比如说一个信号接收到的消息

我有类似以下代码的内容，但在 MyApp 中进行订阅时出错。我很难找到如何从 MyApp 发布新值。我相信正常的过程是在创建 Observable 时使用回调函数。

谁能指出我正确的方向？

@Injectable()
export class DataProvider {

  numbers: Observable<number>;


  constructor(public http: HttpClient) {  
    this.numbers = new Observable<number>();
  }

  get_n_messages()
  {
    return this.numbers;
  }  
}



@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  subscription: any;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, oneSignal: OneSignal, dataCtrl: DataProvider) {    
    this.subscription = dataCtrl.get_n_messages().subscribe( x => {});
  }  

  private onPushReceived(payload: OSNotificationPayload) {
    alert('Push recevied:' + payload.body);
    this.subscription.next(666);1
  }
}

【问题讨论】：

标签： javascript angular ionic-framework rxjs observable

【解决方案1】：

使用 rxjs 主题

这是一个例子

@Injectable()
export class DataProvider {

  numbers: new Subject<number>();

  constructor(public http: HttpClient) {  

  }

}

在.ts

中

 @Component({
      templateUrl: 'app.html'
    })
    export class MyApp {


     constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, oneSignal: OneSignal, dataCtrl: DataProvider) {  }

     private onPushReceived(payload: OSNotificationPayload) {
        alert('Push recevied:' + payload.body);

          this.dataCtrl.numbers.next(666);
      }

     ngOnInit() {

        this.dataCtrl.numbers.subscribe(res => {
            console.log(res);
        });
     }


}

【讨论】：

【解决方案2】：

将numbers 设为BehaviorSubject<number> 而不是Observable<number>。 BehaviorSubject 既可以用作观察者，也可以用作可观察对象。

所以如果你想给它推送新值，你可以在它上面调用next方法并传递新值。

此 BehaviorSubject 的侦听器/订阅者将获得新值。

以下是您必须做的更改：

给你的数据提供者

@Injectable()
export class DataProvider {    
  numbers$: BehaviorSubject<number> = new BehaviorSubject<number>(0);    
}

对于你的组件：

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  subscription: any;
  newNotificationCount;

  constructor(
    platform: Platform, 
    statusBar: StatusBar, 
    splashScreen: SplashScreen, 
    oneSignal: OneSignal, 
    dataCtrl: DataProvider
  ) {
    this.subscription = this.dataCtrl.numbers$.subscribe(newNotificationCount => this.newNotificationCount = newNotificationCount);
  }

  private onPushReceived(payload: OSNotificationPayload) {
    alert('Push recevied:' + payload.body);
    this.dataCtrl.numbers$.next(666);
  }
}

虽然，由于值是在同一个控制器中更新的，我真的认为不需要这样的 DataProvider 服务。但是，如果您还想在其他地方显示 notificationCount 并希望始终保持计数一致，那么这就足够了。

【讨论】：