Angular中基于RxJS实现API缓存时遇重复请求问题的求助

我在Angular项目里碰到了一个缓存相关的问题，想请大家帮忙排查下：

我有一个带多标签页的组件，用户可以在不同标签页之间来回切换。其中第一个标签页需要从后端加载数据，但现在的问题是每次组件1重新初始化时都会发起不必要的HTTP请求。

我的解决思路是做一个缓存服务，把HTTP请求的结果存储在这个服务里，这样当组件重新初始化时，就直接从服务获取数据，不用再调用后端接口了。

同时我还有两个具体要求：

• 这个缓存服务要在父组件级别提供（也就是说，当父组件销毁时，这个服务和里面的缓存结果也要一起被销毁）
• 第一次HTTP请求要在组件1初始化的时候触发，而不是在服务初始化的时候

本来这个方案已经有点进展了，但当我加入Subject来触发首次加载后，现在变成每次组件1重新初始化都会触发一次HTTP请求，完全达不到缓存的效果了。

备注：内容来源于stack exchange，提问作者Marek