Angular 4：路由到另一个组件后保存组件状态

Posted 2023-02-23

【中文标题】Angular 4：路由到另一个组件后保存组件状态

【英文标题】：Angular 4: Save component state after routing to another component

【发布时间】：2018-03-23 09:03:00

【问题描述】：

我正在开发一个有角度的应用程序，目前我遇到了这个问题：

我有一个组件，用户可以在其中填写三个选择框。之后，他可以开始搜索以找到匹配的匹配项。现在他们可以点击点击并显示详细信息。详细信息显示在第二个组件中。从组件 1 到 2 的转换通过 a

成功

[routerLink]="..."

我的问题是，当我返回概览时，必须重新输入所有数据。如何保存第一个组件的状态，以便用户不必再次填写三个选择框？

【参考方案1】：

一种方法是将状态存储在本地存储中。因此，当您返回原始页面时，您可以查询该项目是否存在于本地存储中，如果存在则重新初始化。

let data = ;
localStorage.setItem('settings', data);

或者，您可以通过路由器将比赛向后和第四次传递 参数。

https://angular.io/guide/router

【讨论】：

我试过了，但我得到了那个错误：“”类型的参数不可分配给“字符串”类型的参数。

好的，这个解决方案有效。我可以恢复数据。但我只想恢复，如果用户通过浏览器的后退按钮从组件 2 回到组件 1。我该怎么做？

我不确定这个问题是否更具体，最好为它创建新帖子。如果这是完整的，请将其标记为解决方案 ty ;)

【参考方案2】：

在[(ngModelChange)]或(input)上，将输入内容保存在localStorage中。

初始化表单组件时，查找localStorage 中是否存在键并将字段设置为该键。