Angular 4在模板中顯示自定義RxJS主題

Question

我有一個自定義RxJS主題，代表隨時間變化的距離（製作導航應用程序）。它會隨着時間的推移在不同的地方更新。一個簡化的版本是：

內部服務上面

this.distance$ = new Subject(); 

// After some event 
this.distance$.next(1234) 

// After another event 
this.distance$.next(1240); 

getDistance() { 
    return this.distance$; 
} 

似乎工作。當我在組件中編寫下面的代碼時，每當它發生變化時，都會在控制檯中獲取更新。

this.myService.getDistance().subscribe(distance => console.log(distance)); 

但是，當我嘗試在我的組件模板中顯示它時，它永遠不會更新超出第一個值。

我的部件

this.distance$ = this.myService.getDistance(); 

我的模板

<p>{{distance$ | async}}</p> 

所顯示的值始終等於所述第一發射距離。它永遠不會更新。

在另一個嘗試我在分量從未表現出任何結果都寫了：

this.routeBuilderService.getDistance().subscribe(distance => this.distance = distance); 

然後就是包含在模板{{距離}}。

Answer 1

嘗試將其更改爲一個getter所以重新執行：

get distance$() {return this.myService.getDistance();} 

你可以更進一步藉此和完全刪除的主題。只需在共享的服務中定義一個簡單的屬性即可。然後，吸氣方法應該工作。

我在這裏有一個例子：https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/