Angular - Обновление значения компонента при изменении значения службы

Question

У меня есть несколько компонентов (в цикле NgFor), которые вызывают один и тот же сервис.

Мне бы хотелось, чтобы, когда один компонент изменял значение в этом же сервисе, это новое значение затем отправлялось каждомукомпонент, который вызывает эту службу и впоследствии обновляет это значение в переменной компонента.

Надеюсь, это имеет смысл.

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

Answer 1

Вместо 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 обнаружение изменений).

Answer 2

Просто создайте 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 компонента.