Значок профиля в Navbar, который автоматически перезагружается (Angular)

Question

Я создал панель навигации, которая, когда пользователь входит в систему, ссылка «Вход» изменяется значком профиля этого пользователя. Проблема возникает, когда вы входите в систему, панель навигации перезагружается, но значок профиля не появляется, пока вы не перезагрузите всю страницу вручную с помощью F5.

 <li *ngIf="_usuarioService.estaLogueado() == true" class="dropdown nav-item dropleft">
        <a href="#" class=" nav-link" data-toggle="dropdown">
          <div *ngIf="user" class="photo">
            <img [src]="user.foto | imagen" alt="Profile Photo" width="35" height="35">
          </div>

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

Код компонента:

export class NavbarComponent implements OnInit {

  constructor( public _usuarioService: UsuarioService) { }
  user:Usuario;

  ngOnInit() {
    this._usuarioService.cargarStorage();

    this._usuarioService.getUser(localStorage.getItem('id'))
    .subscribe((data:any) => {
      this.user = data;
    });
  }

}

Answer 1

Когда ваше представление инициализировано, а пользователь еще не вошел в систему, это условие _usuarioService.estaLogueado() == true правильно false, поэтому элемент <li> и его содержимое не отображаются.

Когда вы входите в систему, компонент navbar не уничтожается и не перестраивается, поэтому условие _usuarioService.estaLogueado() == true больше не оценивается.

Когда вы обновляете sh вашу страницу, компонент ДЕЙСТВИТЕЛЬНО уничтожается и затем включается, поэтому условие проверяется еще раз, и на этот раз (поскольку пользователь вошел в систему) _usuarioService.estaLogueado() возвращает значение true. Вот почему вы видите это поведение.

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

Этот небольшой пример может дать вам представление.