RxJS для кэширования Http результата

Question

Я нахожусь в процессе миграции приложения Angular v1.4 на v5 (возможно, v6 в новом году).

Приложение имеет ряд компонентов, например, заголовок, вкладки, сетки, изображения,проверка подлинности и т. д.

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

Похоже на RxJSэто мощная библиотека и она доступна для использования.Кажется, есть много примеров, методов и представлений о достижении этого кэширования с помощью RxJS.

Хотел поделиться тем, что я сделал, в своем приложении v5 и получить обратную связь.Изучая приложение в DevTools, кажется, что выполняется только 1 http.get, поэтому похоже, что оно работает ..

systemPreferences.service.ts:

const CACHE_SIZE = 1;

export class SystemPreferences {
    private $cache: Observable<Object>

    private requestConfig() {
         return this.http.get("www.someurl.com").pipe(
             map(response => response.value)
         );
    }

    public getPreferences() {
        if (!this.cache$) {
            this.cache$ = this.requestConfig().pipe(
             shareReplay(CACHE_SIZE)
            );
        }

        return this.cache$;
    }
}

header.component.ts:

ngOnInit() {
    this.systemPreferences.getPreferences()
        .subscribe(
            (result: any) => {
                this.headerTitle = result.title || '';
            },
            (err) => {
                console.log('there has been an error');
            },
            () => // Some completion code
        );
}

Тот же код компонента для routingGuard canActivate, вкладок и т. Д. И т. Д.