Как обновить основной angular компонент на маршрутизации? - PullRequest
Новая
       39

Как обновить основной angular компонент на маршрутизации?

0 голосов
/ 20 февраля 2020

Я хочу, чтобы у всего моего приложения была одна и та же панель навигации, поэтому, естественно, я поместил ее в app.component. html. Эта навигационная панель содержит адрес электронной почты зарегистрированного пользователя, поэтому она должна появиться на навигационной панели после подключения. Чтобы сохранить эту информацию даже после обновления страницы sh, я сохраняю электронную почту в хранилище сессии.

Дело в том, что для того, чтобы код HTML взял значение, добавленное в сессии хранилище после входа в систему, app.component должен обновить sh. Но этого не происходит при переходе на следующую страницу после входа в систему. Мне нужно обновить страницу sh, чтобы информация отображалась на панели навигации, и я явно не хочу этого делать.

I мог бы создать компонент навигационной панели, но я не хочу включать его повсюду в приложение, хотя это несколько решило бы мою проблему.

Следующий код, просто чтобы немного лучше визуализировать вещи

App.component.ts

App.component.html

Auth.service authentication function

1 Ответ

1 голос
/ 20 февраля 2020

Я рекомендую использовать простой EventEmitter или Rx JS Subject / BehaviorSubject .

user = new BehaviorSubject<User>(null); этот пользователь будет собственностью вашего сервиса.

каждый раз, когда пользователь успешно зарегистрировался или вошел в систему, вы уведомите всех подписчиков о новом значении. this.user.next(user);

и для функции автоматического входа в систему, автоматического выхода из системы вы можете использовать localStorage localStorage.setItem('userData', JSON.stringify(user));

везде, где вам нужен текущий пользователь, например, на navbar, подпишитесь на него, и он даст вам последние изменения. 

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

});

и, наконец, обязательно отмените подписку на подписку пользователя, где бы вы ни подписались 

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

для функции автоматического входа, даже если страница обновилась, мы сохранили текущий пользовательский объект в локальном хранилище всякий раз, когда пользователь успешно входил в систему / регистрировался, поэтому, используя ngOnInit ловушку app.component (родительский компонент), мы можем достичь того, что вам нужно, путем извлечения и восстановления объекта пользователя в 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 перед отправкой восстановленного пользователя. Обязательно вызовите autoLogin () при запуске angular -app.

...