如何在布线上更新主要角度分量？

Question

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

事实是，为了使HTML代码能够在登录后获取会话存储中添加的值，必须刷新app.component。但是登录后进入下一页时不会发生。我必须刷新页面才能在导航栏上显示信息，并且我显然不想这样做。

我可以创建一个导航栏组件，但是我不想在应用程序的任何位置都包含它，即使它可以解决我的问题。

接下来一些代码，只是为了使视觉效果更好一些

Answer 1

EventEmitter或

RxJS Subject / BehaviorSubject。

user = new BehaviorSubject<User>(null);该用户将是您auth服务的属性。每次用户成功注册或登录后，您都会通知所有具有新价值的订阅者。this.user.next(user);

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

只要您需要当前用户，例如在导航栏上，就订阅它，它将为您提供最新的更改。

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

});

最后确保无论您订阅到哪里，都取消订阅用户的订阅

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

对于自动登录功能，即使页面刷新，只要用户成功登录/注册，我们都会将当前用户对象存储在本地存储中，因此通过在app.component（父组件）上使用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);
  }
}

您可以在释放已还原的用户之前检查令牌的有效性和expiresIn。确保在angular-app启动时调用autoLogin（）。