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

Iniciar sesión, página de registro (sin encabezado, sin pie de página)

rutas: ['inicio de sesión', 'registro']

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

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

Páginas de inicio de sesión de la aplicación (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', 'perfil']

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

Por favor, avíseme 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>

Yo viesta pregunta en desbordamiento de pila pero no obtuve una imagen clara de esa respuesta