如何使用 rxjs / angular observable 發布值

Question

我在玩 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
  }
}

Answer 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);
        });
     }


}

Answer 2

使numbers成為BehaviorSubject<number>而不是Observable<number> 。 BehaviorSubjects 既可以用作 Observer 也可以用作 Observable。

所以如果你想向它推送新值，你可以調用它的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 並希望始終保持計數一致，那么這就足夠了。