0

Tengo un componente header donde tengo un botón de login que se muestran si no ha iniciado sesión el usuario. Al hacer clic cambia la vista, inicia sesión y cambia de vista pero al no recargarse ese componente no detecta si ha iniciado sesión.

Componente header html:

<div *ngIf="(role == '')" class="d-inline-flex">
    <li class="nav-item">
      <a class="nav-link" href="/login">Login</a>
    </li>
</div>

Componente header ts:

ngOnInit(): void {
    const user = this.service.getUser();
}

Quería ejecutar el ngOnInit desde el service que guarda el usuario.

1
  • Podrias crear un metodo con todo lo que tiene el ngOnInit y lo ejecutas en el ngOnInit y luego lo ejecutas donde quieras. Commented el 23 oct. 2020 a las 20:44

1 respuesta 1

1

En el servicio se puede tener una variable de tipo Subject que emita el estado de la sesión.

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class SesionService {

  private estadoSesion : Subject<boolean> = new Subject();

  getEstadoSesion(){
    return this.estadoSesion;
  }

  iniciarSesion(){

   // lógica para iniciar sesión

    // al iniciar sesión emitir un resultado para que los clientes
    // sepan que hay sesión iniciada
    this.estadoSesion.next(true);
  }

}

Y el componente puede suscribirse a esa variable, así cuando se inicie sesión el botón se ocultará.

import { Component } from "@angular/core";
import { SesionService } from "./sesion.service";

@Component({
  selector: "hello",
  template: `
    <button *ngIf="!sesionIniciada" (click)="iniciarSesion()">
      Iniciar sesión
    </button>
  `
})
export class HelloComponent {

  sesionIniciada: boolean = false;

  constructor(private sesion: SesionService) {

    this.sesion.getEstadoSesion().subscribe(estado => {
      this.sesionIniciada = estado;
    });
    
  }

  iniciarSesion() {
    this.sesion.iniciarSesion();
  }
}

Ejemplo en vivo

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.