在 angular 4 中为不同页面设置不同布局的最佳方法 [英] Best method to set different layout for different pages in angular 4

问题描述

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

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

路由:['登录','注册']

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

路线:['','about','contact']

3. 应用登录页面(我在此部分为所有应用页面设置了不同的页眉和页脚，但此页眉和页脚与营销网站的页眉和页脚不同)

路线:['dashboard','profile']

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

请告诉我更好的方法.

这是我的代码:

appapp.routing.ts

 const appRoutes: Routes = [{ 路径:''，组件:HomeComponent}，{ 路径:'关于'，组件:关于组件}，{ path: 'contact', 组件: ContactComponent},{ 路径:'登录'，组件:登录组件 }，{路径:'注册'，组件:注册组件}，{路径:'仪表板'，组件:仪表板组件}，{ path: 'profile', 组件: ProfileComponent },//否则重定向到主页{ 路径:'**'，重定向到:'' }];export const routing = RouterModule.forRoot(appRoutes);

app.component.html

app/home/home.component.html

<div class="容器"><p>这是我的家 html</p>

<站点页脚></站点页脚>

app/about/about.component.html

<div class="容器"><p>这是我的关于 html</p>

<站点页脚></站点页脚>

app/login/login.component.html

<p>这是我的登录 html</p>

app/dashboard/dashboard.component.html

<div class="容器"><p>这是我的仪表板 html</p>

<app-footer></app-footer>

我在 stack-overflow 上看到了这个问题，但是我没有从那个答案中得到清晰的图片

解决方案

您可以使用子路由解决您的问题.

在 https://angular-multi-layout-example.stackblitz.io 上查看工作演示/ 或在 https://stackblitz.com/edit/angular-multi 进行编辑-布局示例

如下设置路线

const appRoutes: Routes = [//站点路由在这里{小路: ''，组件:SiteLayoutComponent，孩子们: [{ 路径:''，组件:HomeComponent，路径匹配:'完整'}，{ 路径:'关于'，组件:关于组件 }]},//应用路由在这里{小路: ''，组件:AppLayoutComponent，孩子们: [{路径:'仪表板'，组件:仪表板组件}，{ 路径:'配置文件'，组件:ProfileComponent }]},//没有布局路线{ 路径:'登录'，组件:登录组件}，{路径:'注册'，组件:注册组件}，//否则重定向到主页{ 路径:'**'，重定向到:'' }];export const routing = RouterModule.forRoot(appRoutes);

I am new to angular 4. What I'm trying to achieve is to set different layout headers and footers for different pages in my app. I have three different cases:

1. Login, register page (no header, no footer)

routes: ['login','register']

2. Marketing site page (this is the root path and it has a header and footer, mostly these sections come before login)

routes : ['','about','contact']

3. App logged in pages (I have a different header and footer in this section for all the app pages but this header and footer is different from the marketing site header and footer)

routes : ['dashboard','profile']

I run the app temporarily by adding a header and footer to my router component html.

Please advise me a better approach.

This is my code:

appapp.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>

I saw this question on stack-overflow but i didn't get a clear picture from that answer

解决方案

You can solve your problem using child routes.

See working demo at https://angular-multi-layout-example.stackblitz.io/ or edit at https://stackblitz.com/edit/angular-multi-layout-example

Set your route like below

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);

这篇关于在 angular 4 中为不同页面设置不同布局的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！