typescript - Angular - Uppdatera komponentvärde när tjänstevärde ändras

Jag har flera komponenter (i en NgFor-loop) som anropar samma tjänst.

Vad jag skulle vilja är att när en komponent ändrar ett värde i samma tjänst, så skickas det nya värdet sedan till varje komponent som anropar den tjänsten och uppdaterar i förlängningen det värdet i en komponentvariabel.

Jag hoppas att det är vettigt.

Om du behöver mer information, vänligen meddela mig.

Svar #1

Istället för en BehaviorSubject (vilket ofta är överdrivet i enkla scenarier), kan du använda enkla getters:

Tjänsten har viss data att dela:

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

  constructor() { }

}

Komponenter använder bara en getter och alla mallvariabler som är bundna till egenskapen uppdateras automatiskt när tjänstevärdet ändras:

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

I mallen:

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

Om någon komponent någonstans i applikationen använder tjänsten för att ändra värdet på showImage, kommer vyn automatiskt att uppdateras (genom att utnyttja Angulas inbyggda förändringsdetektion).

Svar #2

Skapa bara en SharedService så här:

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);
  }

}

Denna tjänst kan sedan injiceras i de komponenter där du vill dela datan.

För att sätta datan, anropa setSharedData. För att få de senaste ändringarna på sharedData, prenumerera på sharedData$ Observable direkt i komponentens ngOnInit.