Как правильно передать многоадресный результат запроса HttpClient нескольким компонентам в Angular?

Один из способов — получить Observable из Subject и использовать его в своем шаблоне с помощью канала async:

(building | async)?.buildingName

Кроме того, если разные компоненты подписываются на службу в разное время, возможно, вам придется использовать BehaviorSubject вместо Subject.

@Injectable()
export class BuildingDataService {
  private responseSource = new Subject<object>();
  public response = this.responseSource.asObservable()

  constructor (private http: HttpClient) { }

  fetchBuildingData(location) {
    this.http.post(url, location, httpOptions).subscribe(resp => {
      this.responseSource.next(resp);
    });
  }
}

@Component({
  template: "<h1>{{(building | async)?.buildingName}}</h1>"
  ...
})

export class SidepanelComponent implements OnInit {
  building: Observable<any>;

  constructor(private buildingDataService: DataService) {
      this.building = this.buildingDataService.response;
  }

  ngOnInit() {
  }

  updateBuildingInfo(location) {
    this.buildingDataService.fetchBuildingData(location);
  }
}

Стандартный способ сделать это в угловом приложении — геттер в классе обслуживания.

get data()
{
     return data;
}

Почему вы пытаетесь усложнить ситуацию? Каковы преимущества, и если они есть, они преодолеют недостатки?

Я думаю, что нашел проблему. Я кратко упомяну, что fetchBuildingData запускается пользователями, нажимающими на карту; эта карта представляет собой Leaflet, предоставленную модулем ngx-leaflet. Я привязываюсь к его событию click следующим образом

map.on('click', (event: LeafletMouseEvent) => {
  this.buildingDataService.fetchBuildingData(event.latlng);
});

Теперь я понимаю, что обратный вызов запускается за пределами зоны Angular. Поэтому Angular не может обнаружить изменение на this.building. Решение состоит в том, чтобы вызвать обратный вызов в зоне Angular через NgZone как

map.on('click', (event: LeafletMouseEvent) => {
  ngZone.run(() => {
    this.buildingDataService.fetchBuildingData(event.latlng);
  });
});

Это решает проблему, и каждое предлагаемое решение работает как шарм.

Большое спасибо за быстрые и полезные ответы. Они сыграли важную роль в том, чтобы помочь мне сузить проблему!

Справедливости ради: эта проблема упоминается в документации ngx-leaflet [1]. Мне не удалось сразу понять последствия, так как я все еще изучаю Angular, и мне нужно многое понять.

[1] https://github.com/Asymmetrik/ngx-leaflet#a-note-about-change-detection

ИЗМЕНИТЬ:

Поскольку ваше обнаружение изменений, кажется, борется с любой деталью вашего объекта, у меня есть еще одно предложение. И поскольку я также предпочитаю BehaviorSubject простому Subject, я скорректировал даже эту часть кода.

1st определяет объект-оболочку. Интересно то, что мы добавляем второе значение, которое определенно должно быть уникальным по сравнению с любой другой оберткой того же типа, которую вы производите.

Обычно я помещаю эти классы в файл models.ts, который затем импортирую везде, где использую эту модель.

export class Wrapper {
   constructor(
       public object: Object,
       public uniqueToken: number
   ){}
}

Второй в вашем сервисе используйте эту оболочку следующим образом.

import { Observable } from 'rxjs/Observable'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { Wrapper } from './models.ts';

@Injectable()
export class BuildingDataService {
   private response: BehaviorSubject<Wrapper> = new BehaviorSubject<Wrapper>(new Wrapper(null, 0));

   constructor (private http: HttpClient) { }

   public getResponse(): Observable<Wrapper> {
        return this.response.asObservable();
   }

   fetchBuildingData(location) {
      ...
      this.http.post(url, location, httpOptions).subscribe(resp => {

         // generate and fill the wrapper
         token: number = (new Date()).getTime();
         wrapper: Wrapper = new Wrapper(resp, token);

         // provide the wrapper
         this.response.next(wrapper);
      });
   }

Импортируйте model.ts во все подписные классы, чтобы иметь возможность правильно и легко с ним обращаться. Позвольте вашим подписчикам подписаться на метод getResponse().

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

Код сабита неверный (но идея правильная)

  //declare a source as Subject
  private responseSource = new Subject<any>(); //<--change object by any

  public response = this.responseSource.asObservable() //<--use"this"

  constructor (private http: HttpClient) { }

  fetchBuildingData(location) {
    this.http.post(url, location, httpOptions).subscribe(resp => {
      this.responseSource.next(resp);
    });
  }

Должно быть работа

Другая идея - просто использовать геттер в вашем компоненте.

//In your service you make a variable "data"
data:any
fetchBuildingData(location) {
    this.http.post(url, location, httpOptions).subscribe(resp => {
      this.data=resp
    });
  }

//in yours components

get data()
{
     return BuildingDataService.data
}