Angular - 在服务值更改时更新组件值答案

【问题标题】：Angular - Updating component value, when service value changesAngular - 在服务值更改时更新组件值
【发布时间】：2019-05-12 20:20:21
【问题描述】：

我有多个调用相同服务的组件（在 NgFor 循环中）。

我想要的是，当一个组件更改同一服务中的值时，该新值随后会被发送到调用该服务的每个组件，并随后更新组件变量中的该值。

我希望这是有道理的。

如果您需要更多信息，请告诉我。

【问题讨论】：

标签： angular typescript angular-services angular-components

【解决方案1】：

您可以使用简单的 getter，而不是 BehaviorSubject（在简单的场景中这通常是多余的）：

服务有一些数据要分享：

export class ProductParameterService {
  showImage: boolean;
  filterBy: string;

  constructor() { }

}

组件只使用一个getter，任何绑定到属性的模板变量都会在服务值改变时自动更新：

get showImage(): boolean {
    return this.productParameterService.showImage;
}

在模板中：

                        <img *ngIf='showImage'
                             [src]='product.imageUrl'
                             [title]='product.productName'>

如果应用程序中的任何组件使用该服务更改showImage 的值，视图将自动更新（利用 Angular 内置的更改检测）。

【讨论】：

完美。非常感谢你，黛博拉。
很高兴我能够帮助@WebDevKid，但我并不真正做动画，所以我不知道你其他问题的答案。

【解决方案2】：

只需像这样创建一个 SharedService：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class SharedService {

  private sharedData: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  sharedData$: Observable<any> = this.sharedData.asObservable();

  setSharedData(sharedData) {
    this.sharedData.next(sharedData);
  }

}

然后可以将该服务注入到您要共享数据的组件中。

要设置数据，请致电setSharedData。要获取sharedData 的最新更改，请订阅组件的ngOnInit 右侧的sharedData$ Observable。

【讨论】：