缓存 Angular 组件

Posted 2023-02-23

【中文标题】缓存 Angular 组件

【英文标题】：Cache Angular Component

【发布时间】：2020-11-03 21:56:12

【问题描述】：

我有两个角度分量。第一个组件有一个包含从服务器请求的图片项目的列表。当用户选择一张图片时，他将被转发到第二页，即详细视图，其中显示更多信息。现在，当他点击浏览器的后退按钮时，组件 1 会再次加载并触发一些获取图片的繁重请求。

有没有办法可以缓存组件 1，这样当用户点击浏览器的后退按钮时，组件 1 会恢复并且服务器请求不会再次发送？我已阅读有关 Angular Route Reuse Strategy 的信息，但我想这不适用于浏览器导航？

【问题讨论】：

如果您的 http 调用是从服务完成的（因此不在组件本身内部），该服务将保持活动状态，您可以轻松地在 observable 上执行 shareReplay。这将阻止第二次调用，而只是重用先前发出的值。

【参考方案1】：

只需将项目存储在服务内的变量中