0

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!

1 respuesta 1

3

Usa un servicio en el root, subscríbete y emite desde un Subject el valor del usuario o cuando hay un cambio con este.

import { Subject } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class LoginService {
    public onLoginChange = new Subject();
}

Luego en tu componente App usas OnInit para observar los cambios y OnDestroy para de-suscribirte.

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
    private componentDestroyed = new Subject();
    usserLogged: any;

    constructor(private loginService: LoginService) {
    }

    ngOnInit() {
        this.updateAvatar();
        this.loginService.onLoginChange.pipe(
            tap(() => this.updateAvatar()),
            takeUntil(this.componentDestroyed)
        ).subscribe();
    }

    updateAvatar() {
        this.usserLogged = this._userService.getUserLoggedIn();
    }

    ngOnDestroy() {
        this.componentDestroyed.next();
        this.componentDestroyed.complete();
    }   
}
10
  • Hola! @devconcept muchísimas gracias por tu respuesta, edite el post de nuevo por que no sabría aplicar tu explicación a ver si pudieses hecharme una mano Commented el 24 sept. 2019 a las 6:48
  • @MiguelÁngelMartín Si miras mi respuesta hay una parte que dice que el valor del usuario debes emitirlo cuando hay un cambio. En tu pregunta no dices nada de como obtienes el usuario en primer lugar que usualmente es cuando te autenticas. El localStorage es sólo para persistirlo. Edité la respuesta para usar el valor inicial del usuario. En teoría el servicio de autenticación debe contener el Subject que emite el cambio y debes obtener el valor inicial del localStorage y actualizarlo cuando hay un login en la aplicación.
    – devconcept
    Commented el 24 sept. 2019 a las 13:08
  • No entiendo cuando me dices que emita desde el subject el valor del usuario, se supone que public onLoginChange = new Subject(); onLoginChange está vacío no? Commented el 24 sept. 2019 a las 14:34
  • 1
    @MiguelÁngelMartín Un Subject emite valores usando next. Todos los que se hayan suscrito a el recibirán un callback con el valor. Así es como comunicas entre servicios, componentes y ambos. Desde el servicio de autenticación (o el LoginService en mi ejemplo) invocas next(user) y el componente app que está escuchando recibe el valor y sabe que debe actualizarlo. Eso es básicamente lo que hace el ejemplo.
    – devconcept
    Commented el 24 sept. 2019 a las 14:42
  • Vale, yo puse el subject en el user.service.ts, ya que hay es donde tengo la función donde recupero del localstorage el usuario y luego en el app.component.ts escucho lo que manda el user.service.ts para ver si cambia, es así? Commented el 24 sept. 2019 a las 14:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.