angular - Angular 2 服务中的 Observables 与变量

Question

我有一个关于在 Angular 2 服务中使用 Observables 与变量的问题。前者似乎是首选方式，但我无法找出确切原因。

给出这样的示例服务:

@Injectable()
export class TestService {
    // Method 1
    public data = {x: Math.random(), y: Math.random()};

    // Method 2
    private _data$:BehaviorSubject<any> = new BehaviorSubject({x: Math.random(), y: Math.random()});
    public data$:Observable<any> = this._data$.asObservable();

    constructor() {
        setInterval(() => {
            this.data = {x: Math.random(), y: Math.random()};
            this._data$.next({x: Math.random(), y: Math.random()});
        }, 500);
    }
}

我基本上看到了两种在组件中使用数据的方式。直接使用一个变量:

<pre>{{testService.data | json}}</pre>

并使用 Observable:

<pre>{{(testService.data | async) | json}}</pre>

两者似乎都有效，那么使用更精细的基于 Observable 的方法有什么优势？

笨蛋:https://plnkr.co/edit/1qVDSZwq2NVgZsWFPnii?p=preview

Answer 1

Observables 将值更改推送到订阅更改的组件和服务。

变量需要轮询，因此它具有巨大的性能优势。

尤其是在存在时间问题的情况下，例如组件需要服务从服务器获取的值。组件如何知道值变得可用。

对于可观察对象，组件只是订阅并在值到达时被调用。

Angulars 变化检测直接支持 observables。当 ChangeDetectionStrategy.OnPush被使用并且 View 使用异步管道(<div>{{myObservable | async}}</div>)绑定(bind)到可观察对象，然后变化检测根本不会运行，除非可观察对象推送新值。

Observables 还有其他好处。参见示例 https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html