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

Question

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

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

我希望这是有道理的。

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

Answer 1

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

服务有一些数据可以共享：

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 的内置更改检测）。