Angular - 在服务值发生变化时更新组件值

Question

我有多个组件(在一个 NgFor 循环中)调用同一个服务。

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

我希望这是有道理的。

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

Answer 1

您可以使用简单的 getter，而不是 BehaviorSubject(这在简单的场景中通常是矫枉过正的):

服务有一些数据要共享:

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

  constructor() { }

}

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

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

在模板中:

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

如果应用程序中任何地方的任何组件使用该服务来更改 showImage 的值， View 将自动更新(利用 Angular 的内置更改检测)。