Angular 7 如何将对象从登录页面传递到首页

Question

我们正在处理 Angular 迁移项目。为此，我创建了一个带有登录和主页的 Angular 7 应用程序。用户登录组件成功登录后，将值传递给主页组件。它是巨大的数据，例如页面授权、角色、业务部门 [大约 166 KB]。服务是写在某人身上的。

我调用服务来验证用户和返回数据的服务（这意味着成功登录）。

我正在使用以下代码行重定向到包含数据的主页

let navigationExtras : NavigationExtras = {
  queryParams : { 
    "data": JSON.stringify(data)
  }
};
this.route.navigate(['/home'],navigationExtras);

首页下面用来获取数据

this.route.queryParams
  .subscribe(params => {
    this.data= JSON.parse(params["data"]);
    this.lstUserBusinessUnitDetails = this.data.lstUserBusinessUnitDetails;
  });

问题是我正在获取 URL 中的数据，当我刷新页面时出现 The connection was reset 错误。 URL 如下所示： http://localhost:4211/home?data=%7B%22lstUserCompanyDetails%22:%5B%5D,%22lstU....

请指教

Answer 1

页面刷新后，Angular 项目的所有组件都被销毁并重新初始化，此时所有数据都消失了，您没有来自 LoginComponent

的任何信息

要解决此问题，您需要使用 SessionStorage 将此数据保存在浏览器上，当您关闭此页面（不刷新）时此数据将消失，或者您可以使用 LocalStorage，它们之间的区别是 SessionStorage 删除数据延迟后。

使用会话存储：

保存数据

    sessionStorage.setItem('key', value);

获取数据

    sessionStorage.getItem('key');

有关会话存储的更多信息，您可以阅读此文档 MDN web docs : Window.sessionStorage

Answer 2

如果您使用的是 Angular 7.2，并且您尝试在路由之间传递数据，则可以使用 Angular 提供的最新功能。参考这个 link.

https://netbasal.com/set-state-object-when-navigating-in-angular-7-2-b87c5b977bb

Angular 7 如何将对象从登录页面传递到首页

Angular 7 How to pass the object from login page to home page

angular

angular-ui-router