在Angular 4 中为不同页面设置不同布局的最佳方法

我刚接触Angular 4.我想要实现的是在我的应用程序中为不同的页面设置不同的布局页眉和页脚.我有三个不同的案子:

1. 登录，注册页面(无页眉，无页脚)

路由:[‘LOGIN’，‘REGISTER’]

2. 营销网站页面(这是根路径，它有页眉和页脚，通常这些部分是在登录之前出现的)

路由:[''，'about'，'contact']

3. 应用程序登录页面(对于所有应用程序页面，我在本节中有不同的页眉和页脚，但此页眉和页脚与营销网站的页眉和页脚不同)

路由:[‘仪表板’，‘配置文件’]

我通过向我的路由组件html添加页眉和页脚来临时运行该应用程序.

请给我建议一个更好的方法.

这是我的代码:

app\app.路由.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);

应用程序.组成部分html

<router-outlet></router-outlet>

应用程序/主页/主页.组成部分html

<site-header></site-header>
<div class="container">
    <p>Here goes my home html</p>
</div>
<site-footer></site-footer>

app/about/about.组成部分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>

我在堆栈溢出上看到了this question个，但是我没有从那个答案中得到一个清晰的画面