如何更新路由的主要角度组件? [英] How to update the main angular component on routing?

问题描述

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

I want my entire app to have the same nav bar, so naturally I put it in app.component.html. This nav bar contains the email of the logged user, and so should appear on the nav bar after connection. In order to keep that info even after a page refresh, I keep the email in session storage.

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

The thing is that, in order for the HTML code to pick up the value added in session storage after logging in, app.component has to refresh. But it's not happening when going to the next page after logging in. I have to refresh the page for the info to appear on the navbar, and I clearly don't want to do that.

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

I could create a nav bar component, but I don't want to have to include it everywhere on the app, even though it would somewhat solve my problem.

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

Some code next, just to visualize things a bit better

推荐答案

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

I recommend you using a simple EventEmitter or RxJS Subject/BehaviorSubject.

user = new BehaviorSubject(null);
此用户将成为您的身份验证服务的财产.

user = new BehaviorSubject<User>(null);
this user will be a property of you auth service.

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

each time a user successfully signed-up or logged-in, you will notify all the subscribers with the new value.
this.user.next(user);

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

and for the auto-login, auto-logout functionality you may use localStorage
localStorage.setItem('userData', JSON.stringify(user));

无论您在何处需要当前用户，例如在导航栏上，订阅它，它都会为您提供最新的更改.

wherever you need the current user, for example on navbar, subscribe to it and it will gives you the latest changes.

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

});

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

and finally make sure unsubscribe from user subscription wherever you subscribed

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

对于自动登录功能，即使页面刷新，只要用户登录/注册成功，我们就会将当前用户对象存储在本地存储中，因此通过在应用程序上使用 ngOnInit 钩子.component(父组件)我们可以通过检索用户对象并将其恢复到 angular-app 来实现您的需求.

for auto-login functionality, even if the page refreshed, we stored current user object in local-storage whenever user logged-in/signed-up successfully, so by using ngOnInit hook on the app.component (a parental component) we can achieve what you need by retrieving and restoring the user object to 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().

you may check token validity and expiresIn before emitting the restored user.
make sure to call autoLogin() as the angular-app starts.

这篇关于如何更新路由的主要角度组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！