Tengo un avatar con un ngif si el usuario no está loggeado no se muestra el avatar, si el usuario está loggeado se muestra el avatar. Mi problema es que cuando inicio sesión en mi login.component.html
me lleva al /home home.component
y el avatar lo tengo en el app.component
entonces tengo que recargar la página para que se me actualice el avatar.
Como podría recargar el componente del app.component para que me muestre el avatar cuando inicie sesión?
Mi código es el siguiente:
Yo tengo mi app.component.html
<div id="avatar-collapse" class="avatar-sidebar">
<img *ngIf="!usserLogged" src="assets/images/user.png" />
<img *ngIf="usserLogged && usserLogged.avatar == ''" src="assets/images/user.png" />
<img *ngIf="usserLogged && usserLogged.avatar != ''" src="{{url_uploads_avatar}}{{usserLogged.avatar}}" />
</div>
Aquí le digo que si el usuario no esté loggeado me muestre un avatar, que si el usuario está loggeado y el campo avatar de la base de datos está vacío muestre otro avatar y si el usuario está loggeado y tiene avatar pues que muestre dicho avatar.
Para obtener que el usuario está loggeado en mi app.component.ts
tengo lo siguiente:
ngOnInit() {
this.usserLogged = this._userService.getUserLoggedIn();
}
Finalmente en el servicio de mi usuario retorno en un json si hay algún usuario guardado en la caché. Este sería mi user.service
getUserLoggedIn() {
return JSON.parse(localStorage.getItem('currentUser'));
}
Finalmente tengo otro componente que se llama login.component.html
que es el encargado de hacer el login, supongo que es en este cuando le doy al botón de iniciar sesión cuando debo recargar el app.component.html para que vuelva a consultar si hay alguna información en la caché.
Muchas gracias!