0

Tengo una aplicación en Angular 4, que realiza un login buscando los parámetros de un formulario en una API a través de una petición http. La pantalla inicial, donde aparece el formulario de login dispone de un navbar y un footer, y en el navbar hay un boton que desplega el menu de navegación. El problema esta en que me gustaria que dicho botón no fuera visible hasta que el login se haya hecho con exito. Muestro aqui la estructura del app.component.ts:

<body>
<header>
    <nav>
      <menu></menu>  
    </nav>            
</header>
<main>
    <router-outlet></router-outlet>
</main>
<footer>
    <pie></pie>
</footer>

Y aqui se ve como se muestra en el navegador:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Muchas gracias por adelantado.

4
  • tienes que comprobar si esta el usuario loggeado... si es así lo muestras <ng-container *ngIf="identificado"><nav>...</nav></ng-container> Commented el 8 dic. 2017 a las 15:08
  • Intente hacerlo de ese modo, haciendo uso de una localStorage, pero por alguna razón, no era reconocido por el ngIf. En cambio, haciendo uso de una variable si puedo ocultarlo correctamente. El problema en este caso es que no se como hacer que esta variable sea reconocida en otro componente para cambiarle el valor y que pase a ser visible. Commented el 8 dic. 2017 a las 15:22
  • Puedes agregarlo en ngOnInit() y ngDoCheck() al componente app... y ahí compruebas si está el usuario iniciado o no Commented el 8 dic. 2017 a las 15:24
  • Ponte un ngDoCheck en el app.component y que te compruebe localStorage, en caso correcto se actualizará automaticamente ngDoCheck se ejecuta cuando detecta cualquier tipo de cambios
    – XSDesings
    Commented el 15 dic. 2017 a las 13:42

1 respuesta 1

0

Deberías separar funcionalidades por componentes, de manera que el login fuera un componente independiente que tras realizar la petición http correspondiente redirigiera (funcionalidad routing de Angular) a un nuevo componente que contenga el contenido de tu aplicación con el header de menú que indicas.

Aún así, si quisieras simplemente visualizar/ocultar este header podrías utilizar un sistema de tokens para el login de manera que con un ngIf controlaras si hay un token de sesión (el usuario se ha autenticado) para mostrar o no el menú.

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.