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 ，訂閱sharedData$可觀察右ngOnInit的組件。

Answer 2

您可以使用簡單的getter代替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的內置更改檢測功能）。