1

Tengo la siguiente estructura en componente padre app.component

<app-header></app-header>
<router-outlet></router-outlet>  
<app-footer></app-footer> 

en router-outlet se cargan los componentes dinamicos (home, contacto etc). Tengo un componente llamado login, que se carga con router-outlet. He intentado de muchas formas hacer que que al cargar login elimine app-header y app-footer pero no encuentro la forma. ¿Como puedo hacerlo?

2
  • ngIf ? con alguna variable booleana que indique si se está mostrando el Login
    – FederHico
    el 8 may. 2018 a las 14:42
  • amigo yo tengo el mismo problema como lo haria en el app saludos
    – surribasg
    el 17 sep. 2018 a las 11:27

1 respuesta 1

1

Se me ocurren dos soluciones:

1. Que el componente Login no esté dentro de ese "layout".

Podrías hacer algo como

export const ROUTES: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },   // Main redirect
    {
        path: '',
        children: [
            { path: 'login', component: LoginComponent },
            { path: 'signup', component: SignupComponent }
        ]
    },
    {
        path: '',
        canActivate: [AuthGuard],
        component: LayoutComponent,
        children: [
            //... resto de componentes
        ]
    }

donde LayoutComponent es el que tiene como template

<app-header></app-header>
<router-outlet></router-outlet>  
<app-footer></app-footer> 

2. Usar *ngIf para decidir si se usan los otros componentes, teniendo un atributo en el componente app para decidir si mostrar el encabezado o no.

    <app-header *ngIf="mostrar"></app-header>
    <router-outlet></router-outlet>  
    <app-footer *ngIf="mostrar"></app-footer> 

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.