导航离开并返回 Angular 后，有没有办法保留组件的 DOM state

Question

在研究了几天这个问题之后，我似乎已经走到了死胡同。

我正在处理，我假设，是一个相当常见的场景：在用户导航到某个页面并进行一些更改（输入字段的内容，滚动网格数据甚至更改一些可编辑的单元格值）后，他导航到不同的页面。 当用户返回原始页面时，所有更改必须保持不变。

现在，这意味着上述输入字段中的 cursor 必须在同一个位置，在网格中滚动 position 并更改单元格值，以及用户所做的任何其他更改，必须保留。

像在 localStorage 中存储数据、使用服务甚至自定义重用策略这样的解决方案都行不通，因为保存多个子组件中包含的大量信息是不可能的。

目前，我正在考虑 DOM 操作，其中渲染的模板将在onDestroy钩子中移动到父组件中的容器，并稍后在onInit中返回。 当然，这是玛丽的一次尝试，感觉非常不自然。

我希望有人之前已经（并解决了）这个问题，因为就像我提到的那样，它看起来像是相当常见的使用模式。

Answer 1

与 React 相比，在 angular 中没有太多选择可以做到这一点，

我可以向您推荐的是，将“环境”中的所有数据存储为 object 并在用户路由返回时从环境中填充数据。

通常我会这样做，当组件加载时，我将值存储在对象中。 当调用销毁时，所有这些对象都会进入一个主要 object 下的环境。

当 oninit 调用时，我正在检查 object 是否有值并将页面恢复到原来的位置。

Answer 2

I think you are looking for Angular RouteReuseStrategy, where Angular can cache some routes state, without destroying the component state, so when ever the user visit the same route a cached view will be used, RouteReuseStrategy Docs .

您也可以查看这篇中型文章，实现所需的方法中型

Answer 3

对于少量数据，我们可以使用您提到的服务或本地存储对于大量数据，我们可以使用 go

NgRx

https://dzone.com/articles/angular-app-state-management-with-ngrx

Answer 4

我为此目的使用了一项服务，从存储在服务中的 object 中保存和恢复页面的 state，但我无法弄清楚用户文件上传的结果如何保持用户上传的图像等待文件上传到云存储。 解决此问题的任何想法都有帮助，因为 angular 导航过程似乎清除了缓存文件