Question

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

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

我希望这是有道理的。

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

Answer 1

只需创建这样的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的最新更改，请订阅组件sharedData$中的ngOnInit Observable权限。

Answer 2

您可以使用简单的吸气剂来代替BehaviorSubject（在简单的情况下通常过分杀伤）：

服务中有一些数据要共享：

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

  constructor() { }

}

组件仅使用吸气剂，并且当服务值更改时，绑定到属性的任何模板变量都会自动更新：

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

在模板中：

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

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

Angular-服务值更改时更新组件值

2 个答案: