如何使用缓存在 Angular 9 中的组件实例之间维护变量的值？

Question

我正在尝试创建一个多选组件，该组件可以在我的整个站点中重复使用，但它会记住上次所做的选择，以便用户不必在不同的页面上继续进行相同的选择。

以下 stackblitz 演示了我想要实现的简化版本： https ://stackblitz.com/edit/angular-y97cbz-yarva4

在上面的示例中，我希望组件记住在第一页上所做的选择，并在第二页上的组件实例上默认选择这些选项。

我尝试使用服务来存储选择，该服务在禁用页面缓存时有效，但一旦打开缓存就中断！ 理想情况下，我需要缓存页面，因为它们包含在实际应用程序中的大量数据。

有没有办法在不禁用缓存的情况下实现这一目标？

Answer 1

尝试构建一个新组件，将您的选择保存在他们的服务中，并通过selector在其他模板中使用该组件。 这正是您在问题中提供的 stackblitz 中的内容。

如果可以，请提供您的一些代码，这对我们帮助您更有用。 我希望你能成功。