了解 Angular 共享服务答案

【问题标题】：Understanding Angular Shared service了解 Angular 共享服务
【发布时间】：2019-03-29 07:16:58
【问题描述】：

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

我有一个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 中仅调用了一次此方法，该方法在打开组件时呈现，但值会保持更新。有人可以解释一下吗？当服务中的值发生变化时，我的组件中的变量如何知道？哪个部门负责？

谢谢

【问题讨论】：

你在哪里使用total属性？
@yurzui 我在我的一个组件上使用它来显示总金额的当前值，共享服务中有一个数组，每次我在该数组中添加值或其他人时，我都会调用方法 updateValues它会发出总计，并且我会在需要时将其显示在少数组件上..
你是像{{total}}还是{{total | async}}一样使用它？
@Roxy'Pro 我用您在 cmets 中提出的一些问题更新了我的答案。我希望现在更清楚了。如果有不明白的地方请告诉我:)

标签： angular service components observable behaviorsubject

【解决方案1】：

我的组件中的变量如何在值更改时知道服务？

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

哪个部分负责？

this.sumEmit.next(this.sum);

【讨论】：

@Sajeetharan 为什么如果我不在组件中使用 .subscribe 它会起作用，无论如何组件知道新值，如何？
@Roxy'Pro 是使用 behaviorsubject 的功能。它在核心 itef 内处理。如果你只返回 observable，你需要订阅，因为你返回的是一个主题，这应该可以工作
如果你想订阅你的组件返回返回 this.sumEmit;一个 observable 并调用 subscribe()
@Sajeetharan 感谢您的帮助，所以如果我想订阅我可以将 BehaviorSubject 更改为 Observable 吗？你觉得哪个更好？
你应该在这里使用 observable，因为我看到并理解两者之间的区别 stackoverflow.com/questions/39494058/…

【解决方案2】：

所以，每次调用updateValues() 方法时，它都会发出值总而言之，对吗？

是的，没错。

这是否意味着我的价值每次总金额都是最新的改了吗？

是的。

我的组件中的变量如何在值更改时知道服务？

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

您可以在Angular-Observables 和ReactiveX-Observable 阅读更多相关信息

哪个部分负责？

这个

this.sumEmit.next(this.sum);

补充说明

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

因为value 属性可以随时访问，所以BehaviorSubjects 的一个显着特征（参见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 可用于表示“随时间变化的值”。例如，生日事件流是主题，但一个人的年龄流是BehaviorSubject（参见RxJS-Overview 的BehaviorSubject部分）。

进一步阅读

【讨论】：

我没有用 .subscribe 做那部分，它可以工作，为什么？
这里不需要订阅