如何更新路由的主要 angular 组件？

Question

我希望我的整个应用程序都具有相同的导航栏，所以我很自然地把它放在 app.component.html 中。此导航栏包含已登录用户的电子邮件，因此应在连接后显示在导航栏上。为了即使在页面刷新后也能保留该信息，我将电子邮件保存在会话存储中。

问题是，为了让 HTML 代码在登录后获取会话存储中添加的值，app.component 必须刷新。但是登录后转到下一页时不会发生这种情况。我必须刷新页面才能使信息显示在导航栏上，我显然不想这样做。

我可以创建一个导航栏组件，但我不想在应用程序的任何地方都包含它，尽管它会在一定程度上解决我的问题。

接下来是一些代码，只是为了更好地形象化

Answer 1

我建议你使用简单的 EventEmitter 或 RxJS Subject/BehaviorSubject.

user = new BehaviorSubject<User>(null);
此用户将成为您的授权服务的属性。

每次用户成功注册或登录时，您将通知所有具有新值的订阅者。
this.user.next(user);

对于自动登录、自动注销功能，您可以使用 localStorage
localStorage.setItem('userData', JSON.stringify(user));

无论你在哪里需要当前用户，例如在导航栏上，订阅它，它会给你最新的更改。

this.userSub = this.authService.user.subscribe(user => {

});

最后确保在您订阅的任何地方退订用户订阅

ngOnDestroy() {
    this.userSub.unsubscribe();
}

对于自动登录功能，即使页面已刷新，只要用户 logged-in/signed-up 成功，我们就会将当前用户对象存储在本地存储中，因此通过在 [=54= 上使用 ngOnInit 挂钩]（父组件）我们可以通过检索用户对象并将其恢复到 angular-app.

来实现您的需求

autoLogin() {
  const userData = JSON.parse(localStorage.getItem('userData'));
  if (!userData) {
    return;
  }

  const loadedUser = new User(
    userData.email,
    userData.token,
    new Date(userData.expiresIn)
  );

  if (loadedUser.token) {
    this.user.next(loadedUser);
  }
}

您可以在发出恢复的用户之前检查令牌有效性和过期时间。
确保在 angular-app 启动时调用 autoLogin()。

如何更新路由的主要 angular 组件？

How to update the main angular component on routing?

routing

session-storage

angular