Question

我想返回上一页时如何搜索结果。

示例）

boardListUrl：/ board

boardDetailUrl：/ board / detail /：id

“标题”搜索按钮在boardListUrl上

ex）“标题”搜索按钮单击：“你好”搜索（称为backand服务器REST api）

==> boardListUrl：/ board
```
   tables datas: "hello ~" / "hello 2 ~" / "hello  3~" / 
```
表行单击=> boardDetailUrl页面

ex）/ board / detail /：1

boardDetailUrl页面存在“返回页面”按钮
“后页”按钮单击

==>我想要[boardListUrl页面+“ hello”搜索结果或搜索词：'hello']

如何使用搜索词（搜索参数）或搜索数据返回上一页

Answer 1

在组件中“获取旧状态”的关键是使用服务并实现OnInit和OnDestroy

export class MyComponent implements OnInit, OnDestroy{

variableState:any; //<--a variable we can "conserv"
constructor(private sharedService: SharedService){}
ngOnInit() {
    //if the service has the variable take the value, else null
    this.variableState=this.sharedService.variableState?this.sharedService.variableState:null;
}
ngOnDestroy{
   //In the destroy, we use the service to set the variable
   this.sharedService.variableState=this.variableState;
}

服务如此简单

@Injectable()
export class sharedService{
variableState:any;
}

好吧，我们不必仅对共享变量进行SharedService，我们可以使用例如只需添加公共变量即可获取数据的相同服务。

注意：我们的variableState也可以是一个对象

Answer 2

您可以将结果存储在localStorage中，并在任何地方使用。例如：
localStorage.setItem("searchResults", JSON.stringify(yourResults));
并将其放在组件中
let rs = JSON.parse(localStorage.getItem('searchResult'))

Angular 2 4 5-如何在重新加载页面或使用Angular单击“返回”按钮时保存搜索结果

2 个答案: