Как поделиться вызовом Angular httpClient.get с помощью оператора обмена RxJS?

Question

Может кто-нибудь помочь мне с этой проблемой?

У меня есть служба, которая получает некоторые данные с сервера с помощью httpClient.get() вызова.

Также у меня есть компонент, который использует эту службуи показывает конкретную информацию из этих данных.Проблема в том, что мне нужно, чтобы этот компонент 3 или 4 раза отображался на одной странице / в представлении, показывая разные конкретные данные из одного и того же вызова, и компонент, из-за архитектуры приложения, должен быть тем, кто выполняет вызов.

Как я могу обнаружить, что вызов уже был выполнен, и повторно использовать его?

Я думал об операторах RxJS share или даже shareReplay, но в объясненном сценарии я не знаю, как использоватьэто понятно.

Заранее спасибо.

Answer 1

Сделайте один Http запрос и работайте с кэшированными / сохраненными данными.Использовать ниже подход

export class SharedService {

    private data$: Observable<User>;
    private getUser(): void {

        this.data$ = this.http
            .get<User>(BACKENDPATH).pipe(shareReplay(1));

    }

    getData(): Observable<User> {
        if (!this.data$) {
           this.getUser();
        }
        return this.data$;
    }
}

Компонент:

this.service.getData().subscribe(...)