了解 Angular 共享服务

Question

我想在我的组件总量发生变化时保持更新，我想知道这是对的：

我有一个 shared.service.ts 被注入到我的组件中，所以它看起来像这样（我的共享服务）：

shared.service.ts

private sumEmit= new BehaviorSubject<number>(0);

public updateValues() {
this.sum= 0;
this.sum+= +(price*quant).toFixed(2);
this.sumEmit.next(this.sum);
}

获取总量的方法也在服务中：

 getTotal(): BehaviorSubject<number> {
    return this.sumEmit;
  }

那么，每次调用updateValues()方法时，它都会发出sum的值，对吗？

并且在每次值更改时都需要检索值的组件中，我这样做了：

mycomponent.component.ts

首先我注入了共享服务，然后在ngOnInit生命周期hool中我写道：

// simple variable to hold value from service

total : number;


ngOnInit() 
{
    this.total = this.SharedService.getTotal();
}

这是否意味着每次总金额更改时我的值都会是最新的？

对我来说最令人困惑的部分是我只在组件打开时呈现的 ngOnInit 中调用此方法一次，但值保持更新..有人可以解释一下吗？当服务中的值发生变化时，我的组件中的变量如何被感知？哪个部分负责？

谢谢

Answer 1

How come variable in my component is aware when value is changed in service?

您正在使用 BehaviourSubject，这意味着新订阅者将始终获得同步发出的最后一个值。

Which part is responsible for that?

this.sumEmit.next(this.sum);

Answer 2

So, every time updateValues() method is called, it will emit value of sum, that's right?

是的，没错。

Does this mean that my value will be up to date every time total amount is changed?

是的。

How come variable in my component is aware when value is changed in service?

因为 BehaviorSubject 从 Subject 扩展而来，而 Subject 从 Observable 扩展（并实现 SubscriptionLike）。 Observable 的工作方式是，每当发布者（在本例中为 this.sumEmit.next(this.sum)）为变量设置一个新值时，所有订阅者都会收到新值的通知。

您可以在 Angular-Observables and ReactiveX-Observable

阅读更多相关信息

Which part is responsible for that?

这个

this.sumEmit.next(this.sum);

补充说明

如果我们不使用 .subscribe 为什么它会起作用？

因为value属性可以随时访问，BehaviorSubject的一个显着特点（见此discussion）。这与 Subject 或 Observable 不同，后者只有在您订阅他们的流后才能开始获取值。

我们可以使用 getValue 方法访问该值，即：let theValue = this.SharedService.getTotal().getValue()。此外，如果我们将 BehaviorSubject 分配给一个变量（我们称它为 val）并使用该变量，即使用 async 管道，该值将由该管道自动提取，您您会看到 UI 自动更新，无需订阅流（管道会为您完成此操作）。例如：

// component.ts
this.val = this.SharedService.getTotal(); // val is a `BehaviorSubject`

// component.html
{{ val | async }}

如果我想订阅可以把BehaviorSubject改成Observable吗？

您无需更改为 Observable 即可订阅。您也可以订阅 BehaviorSubject，就像订阅 Observable 一样。如果你想得到 BehaviorSubject 作为 Observable 你只需要做： const myObservable: Observable = myBehaviorSubject.asObservable();

哪个更好：BehaviorSubject 或 Observable？

我们不能说一个比另一个好，它们只是在某些方面表现不同。您需要根据情况应用其中一种。通常，BehaviorSubjects 可用于表示 "values over time"。例如，生日事件流是一个 Subject，但是一个人的年龄流将是 BehaviorSubject（参见 BehaviorSubject 部分 RxJS-Overview）。

进一步阅读

Understanding rxjs BehaviorSubject, ReplaySubject and AsyncSubject

了解 Angular 共享服务

Understanding Angular Shared service

angular

service

components

observable

behaviorsubject