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 时，然后基于点击即 教育概览 或 薪资概览 只需发送带有网址。

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

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

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

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

1 个答案: