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

我是 Angular 4 的新手。我想要实现的是为应用程序中的不同页面设置不同的布局页眉和页脚。我有三种不同的情况：

1. 登录、注册页面（无页眉、无页脚）

路线：['登录'，'注册']

2. 营销网站页面（这是根路径，它有页眉和页脚，这些部分大多在登录之前出现）

路线 : ['','关于','联系方式']

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

路线 : ['仪表板','个人资料']

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

请告诉我更好的方法。

这是我的代码：

应用程序\应用程序.路由.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>

应用程序/home/home.component.html

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

应用程序/about/about.component.html

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

应用程序/登录/login.component.html

<div class="login-container">
    <p>Here goes my login html</p>
</div>

应用程序/仪表板/dashboard.component.html

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

I saw 这个问题 https://stackoverflow.com/questions/40508557/multiple-layout-for-different-pages-in-angular-2关于堆栈溢出，但我没有从该答案中得到清晰的图片

您可以使用子路线解决您的问题。

请参阅工作演示：https://angular-multi-layout-example.stackblitz.io/ https://angular-multi-layout-example.stackblitz.io/或编辑于https://stackblitz.com/edit/angular-multi-layout-example https://stackblitz.com/edit/angular-multi-layout-example

设置你的路线如下

const appRoutes: Routes = [
    
    // Site routes goes here 
    { 
        path: '', 
        component: SiteLayoutComponent,
        children: [
          { path: '', component: HomeComponent, pathMatch: 'full'},
          { path: 'about', component: AboutComponent }
        ]
    },
    
    // App routes goes 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);