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

然后模板只包含{{distance}}。

Answer 1

尝试将其更改为getter，以便重新执行：

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

你可以更进一步，彻底摆脱这个主题。只需在共享的服务中定义一个简单属性即可。那么getter方法应该可行。

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

Angular 4在模板中显示自定义RxJS主题

1 个答案: