Eu sou novo no angular 4. O que estou tentando alcançar é definir diferentes cabeçalhos e rodapés de layout para páginas diferentes no meu aplicativo. Eu tenho três casos diferentes:

Login, página de registro (sem cabeçalho, sem rodapé)

rotas: ['login', 'registrar']

Página do site de marketing (esse é o caminho raiz e possui cabeçalho e rodapé, principalmente essas seções antes do login)

rotas: ['', 'about', 'contact']

Páginas de login do aplicativo (nesta seção, tenho um cabeçalho e rodapé diferentes para todas as páginas do aplicativo, mas esse cabeçalho e rodapé são diferentes do cabeçalho e rodapé do site de marketing)

rotas: ['painel', 'perfil']

Executo o aplicativo temporariamente adicionando um cabeçalho e rodapé ao html do componente do roteador.

Por favor, informe-me de uma abordagem melhor.

Este é o meu 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>

eu viessa questão no estouro de pilha, mas não obtive uma imagem clara dessa resposta