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

Question

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

1. 登录,注册页面(无标题,无页脚)

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

2. 营销网站页面(这是根路径,它有一个页眉和页脚,大多数这些部分在登录前到来)

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

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

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

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

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

这是我的代码:

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

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

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

应用程序/约/ 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>

我在堆栈溢出时看到了这个问题,但我从那个答案中得不到清晰的图片

Answer 1

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

请参阅https://angular-multi-layout-example.stackblitz.io/上的工作演示或在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 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);

推荐参考:http://www.tech-coder.com/2017/01/multiple-master-pages-in-angular2-and.html

Answer 2

你可以使用孩子,例如

const appRoutes: Routes = [
    { path: '', component: MainComponent,
        children:{
            { path: 'home'  component:HomeComponent},
            { path: 'about', component: AboutComponent},
            { path: 'contact', component: ContactComponent},
               ..others that share the same footer and header...

        }
    },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'admin', component:AdminComponent, 
         children{
            { path: 'dashboard', component: DashboardComponent },
            { path: 'profile', component: ProfileComponent }
               ..others that share the same footer and header...
         }
    }
    { path: '**', redirectTo: '' }
];

MainComponent和AdminComponent之类的

<app-header-main></app-header-main>
<router-outlet></router-outlet>
<app-footer-main></app-footer-main>

帖子讲述了在不同文件中分开的路线