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

Question

I am trying to create a multi-select component that can be reused throughout my site but which remembers the last selection made so that the user doesn't have to keep making the same selection on different pages.

The following stackblitz demonstrates a simplified version of what I would like to achieve: https://stackblitz.com/edit/angular-y97cbz-yarva4

In the above example I would like the component to remember the selection made on Page One and select these choices by default on the component instance on Page Two.

I've tried to use a service to store the selection which works when I disable my page caching but breaks as soon as I turn the caching on! Ideally I need the pages to be cached, though, due to the large amount of data they contain in the real application.

Is there a way to achieve this without disabling the caching?

Answer 1

Try to build a new component that will hold your selection in their service and use that component in other templates via selector . That is exactly what is in stackblitz that you provide in your question.

If you can please provide some of your code, which will be more useful for us to help you. I hope that you'll make it work.