La meilleure méthode pour définir la mise en page différente pour les différentes pages angulaire 4

Je suis nouveau sur angulaire 4. Ce que je suis en train de réaliser est de définir les différentes mise en page les en-têtes et pieds de page pour les différentes pages de mon application. J'ai trois cas différents:

1. La connexion, la page d'enregistrement (pas d'en-tête, pas de pied de page)

routes: ['login','register']

1. Marketing de la page du site (c'est le chemin de la racine et il a un en-tête et pied de page, la plupart de ces sections avant la connexion)

routes : [",'sur','contact']

1. App enregistré dans les pages (j'en ai un autre en-tête et pied de page dans cette section pour toutes les pages de l'application, mais cet en-tête et pied de page est différente de la commercialisation du site d'en-tête et pied de page)

routes : ['tableau de bord','profil']

Je lance l'app temporairement par l'ajout d'un en-tête et pied de page de mon routeur composant html.

Merci de me conseiller une meilleure approche.

C'est mon code:

app\app.le routage.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>

J'ai vu cette question sur stack overflow, mais je n'ai pas d'obtenir une image claire de cette réponse

OriginalL'auteur ninja dev | 2017-10-02