AngularJS - 将路由组件保存在缓存中（保持活动状态）

Posted 2023-02-23

【中文标题】AngularJS - 将路由组件保存在缓存中（保持活动状态）

【英文标题】：AngularJS - Keep route component in cache (keep-alive)

【发布时间】：2021-05-28 15:12:45

【问题描述】：

我需要将组件 A 的状态保存在缓存中，这样当我从 A 导航到 B 或 C 并返回到 A 时，它不会再次重新渲染（它还包括一个 API 调用构造函数，所以它有点慢）。我希望在用户的整个会话期间保持这个初始状态。 在 Vuejs https://jsfiddle.net/shidianxia/ckj7xbqq/ 中，他们有一个非常简单的方法来使用这种语法：

<keep-alive :include="include">
    <router-view></router-view>
</keep-alive>

我希望 AngularJS 有类似的东西，注意我说 JS 太老了 Angular。我有一个使用现代 angular 但保留旧 angularjs 路由器的混合应用程序。

感谢您的帮助，谢谢。

【问题讨论】：

有一个 ***.com 的问题非常相似，可能对您有帮助 ***.com/questions/22714409/…

@PhilippMainz 谢谢我也想过这样做。但是我的主要问题是，即使在数据到达之后，重新渲染 Angular 也需要很长时间。因此，通过您的解决方案，我可以解决问题的一部分（将对服务器的请求限制为仅一个），但我仍然需要重新渲染所有内容。

【参考方案1】：

根据您的评论，我认为将其分为两部分是有意义的。

第 1 部分：将状态保存在服务中 通过将状态保留在服务中，您可以限制发送到服务器的请求，从而节省时间。

第 2 部分使用 $templateCache 通过使用 angularjs 模板缓存服务，您应该尽量减少使用数据渲染视图的时间。您可以在他们的文档https://docs.angularjs.org/api/ng/service/$templateCache

中找到有关如何使用它的信息

如果你最终在渲染时仍然有这个闪烁，你应该使用 ngCloak 来防止显示未编译的视图 (https://docs.angularjs.org/api/ng/directive/ngCloak)