angular - 路由后以角度将数据传递给组件

Question

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

要求是：

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

在我的应用程序中，我有一个简单的登录组件。如果登录成功，它将导航到具有子路由器出口的组件。我的意思是，它导航到/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满足上述要求的最佳方法是什么？

谢谢。

标签： angularangular-router

Answer 1

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