Angular

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

Answer 2

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

服务有一些数据要共享：

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

Angular - 更新组件值，当服务值改变时

Angular - Updating component value, when service value changes

typescript

angular-services

angular-components