我应该什么时候在Angular中设置localStorage ?

Question

我有一个EmployeesComponent上的员工名单，上面有"教育概况";和"薪酬概述";每个记录的按钮。当我点击其中一个概述按钮时，它首先进入OverviewComponent，然后将相应的组件(工资或教育)加载到这个OverviewComponent中。还有一个"后退"按一下这些工资和教育组成部分。结构如下图所示:

组件问题是:当我回到EmployeesComponent时，我需要在导航到概述页面之前重新加载分页参数，例如最后页码。为此，我使用localStorage，并在EmployeesComponent的每个页面加载时检查保存的值。

searchParams: any;
ngOnInit() {
let searchParams = JSON.parse(localStorage.getItem('routeParams'))?.searchParameters;
if(searchParams){
this.searchParams = searchParams;
window.localStorage.removeItem('routeParams'); // remove routeParams from localStorage

// load list using this.searchParams
}

但是我将页面参数保存在OverviewComponent上，以便使用单个位置用于工资和教育页面。我认为这不是一个好方法，它可能会导致localStorage项混合，因为它们使用相同的键(出于某种原因，我有时需要使用相同的键)。

那么，我应该在导航到EmployeesComponent中的概述页面之前设置分页参数吗?然后检查他们装载EmployeesComponent?在这种情况下，什么是合适的方法?

Answer 1

可以在路由中使用查询参数。所以现在当你从employess component重定向到overViewComponent时，然后基于点击，即教育概述or薪酬概况只需发送带有url的查询参数。

那么现在，当你回到employess component，只需使用查询参数值你得到在overView component，你可以得到你想要的信息回到employess component。

Q-在本地存储中添加和删除分页项最合适的位置

A-添加和删除本地存储项的最合适的位置是它得到更改的地方。在您的情况下，只需在overView组件中设置localstorage，您将在此函数中获得params(this. activateroute .params())。并删除雇员组件的localstorage on ngOnInit函数。