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.