路由后将数据按角度传递给组件

Question

我在SO上找到了有关此主题的一些旧答案/方法，但我想知道，现在是2020年，在Angular 9+中，什么是路由后将数据传递到其他组件的最佳方法。

要求是：

• 网址栏中不应显示数据
• 页面刷新后数据应该可用

在我的应用中，我有一个简单的登录组件。如果登录成功，它将导航到带有子路由器出口的组件。我的意思是，它导航到/document/list并且路由配置如下：

  {
    path: "document", component: StartPageComponent, children: [
      { path: "list", component: DocumentTableComponent }
    ]
  },

startpage组件如下所示：

<app-header (hamburgerClicked)="onHamburgerClick()" [userName]="userName" [roleName]="roleName"></app-header>
<app-sidebar #appsidebar></app-sidebar>

现在，我想在StartPageComponent组件的userName中使用值roleName和login。满足以上要求的最佳方法是什么？

谢谢。

Answer 1

登录组件经过身份验证后，您必须将数据存储在localstorage中。您可以使用ngInit lifeCycle方法中的localStorage来检索组件中的值。