page - pasar parametros entre componentes angular 4




El mejor método para establecer un diseño diferente para diferentes páginas en angular 4 (2)

Soy nuevo en angular 4. Lo que estoy tratando de lograr es configurar diferentes encabezados y pies de página para diferentes páginas en mi aplicación. Tengo tres casos diferentes:

  1. Inicio de sesión, página de registro (sin encabezado, sin pie de página)

rutas: ['login', 'registro']

  1. Página del sitio de marketing (esta es la ruta raíz y tiene un encabezado y pie de página, en su mayoría estas secciones vienen antes del inicio de sesión)

rutas: ['', 'acerca de', 'contacto']

  1. Aplicación iniciada en las páginas (tengo un encabezado y pie de página diferente en esta sección para todas las páginas de la aplicación, pero este encabezado y pie de página es diferente del encabezado y pie de página del sitio de marketing)

rutas: ['tablero de mandos', 'perfil']

Ejecuto la aplicación temporalmente agregando un encabezado y un pie de página al componente html de mi enrutador.

Por favor, aconséjeme un mejor enfoque.

Este es mi código:

app \ app.routing.ts

   const appRoutes: Routes = [
        { path: '', component: HomeComponent},
        { path: 'about', component: AboutComponent},
        { path: 'contact', component: ContactComponent},
        { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent },
        { path: 'dashboard', component: DashboardComponent },
        { path: 'profile', component: ProfileComponent },


        // otherwise redirect to home
        { path: '**', redirectTo: '' }
    ];

    export const routing = RouterModule.forRoot(appRoutes);

app.component.html

<router-outlet></router-outlet>

app / home / home.component.html

<site-header></site-header>
<div class="container">
    <p>Here goes my home html</p>
</div>
<site-footer></site-footer>

app / about / about.component.html

<site-header></site-header>
<div class="container">
    <p>Here goes my about html</p>
</div>
<site-footer></site-footer>

app / login / login.component.html

<div class="login-container">
    <p>Here goes my login html</p>
</div>

app / dashboard / dashboard.component.html

<app-header></app-header>
<div class="container">
    <p>Here goes my dashboard html</p>
</div>
<app-footer></app-footer>

Vi esta pregunta sobre el desbordamiento de pila pero no obtuve una imagen clara de esa respuesta


Puedes resolver tu problema utilizando rutas infantiles.

Vea la demostración de trabajo en https://angular-multi-layout-example.stackblitz.io/ o edite en https://stackblitz.com/edit/angular-multi-layout-example

Establece tu ruta como abajo

const appRoutes: Routes = [

    //Site routes goes here 
    { 
        path: '', 
        component: SiteLayoutComponent,
        children: [
          { path: '', component: HomeComponent, pathMatch: 'full'},
          { path: 'about', component: AboutComponent }
        ]
    },

    // App routes goes here here
    { 
        path: '',
        component: AppLayoutComponent, 
        children: [
          { path: 'dashboard', component: DashboardComponent },
          { path: 'profile', component: ProfileComponent }
        ]
    },

    //no layout routes
    { path: 'login', component: LoginComponent},
    { path: 'register', component: RegisterComponent },
    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

Referencia recomendada: http://www.tech-coder.com/2017/01/multiple-master-pages-in-angular2-and.html


puedes usar niño por ejemplo

const appRoutes: Routes = [
    { path: '', component: MainComponent,
        children:{
            { path: 'home'  component:HomeComponent},
            { path: 'about', component: AboutComponent},
            { path: 'contact', component: ContactComponent},
               ..others that share the same footer and header...

        }
    },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'admin', component:AdminComponent, 
         children{
            { path: 'dashboard', component: DashboardComponent },
            { path: 'profile', component: ProfileComponent }
               ..others that share the same footer and header...
         }
    }
    { path: '**', redirectTo: '' }
];

MainComponent y AdminComponent como

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

El post habla de separar en diferentes archivos las rutas.