parametros - page title angular 4

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

Question

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'']

2. 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'']

3. 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

Answer 1

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

Answer 2

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.