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

问题描述

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

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. 登录，注册页面(无页眉，无页脚)

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

routes: ['login','register']

1. 营销站点页面(这是根路径，并且具有页眉和页脚，大多数这些部分在登录之前出现)

路线:[''，'关于'，'联系']

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

1. 应用程序登录页面(本节中所有应用程序页面的页眉和页脚都不同，但是此页眉和页脚与营销网站的页眉和页脚不同)

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

routes : ['dashboard','profile']

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

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

请告诉我一个更好的方法.

Please advise me a better approach.

这是我的代码:

   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.

在 https://angular-multi-layout-example.stackblitz.io上查看工作演示./或在 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 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屋！