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

Question

我在EmployeesComponent 上有一个员工列表，每条记录都有“教育概览”和“工资概览”按钮。当我单击其中一个概览按钮时，它首先转到OverviewComponent，然后将相应的组件（工资或教育）加载到此OverviewComponent。每个薪水和教育组件上还有一个“返回”按钮。结构如下图所示：

components

问题是：当我回到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 时，然后根据点击，即教育概览 或工资概览 只需发送带有url 的查询参数。

那么现在当您返回employess component 时，只需使用您在overView component 中获得的查询参数值，您就可以在employess component 中获得您想要的信息。

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

A- 添加和删除 localstorage 项目的最合适的地方是它得到改变的地方。 在您的情况下，只需在 overView 组件中设置 localstorage 即可在此函数中获取参数（ this.activateRoute.params() ）。并移除员工组件的ngOnInit函数上的localstorage。