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

Question

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

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

路由： [“登录”， “注册”]

路线：[''，'about'，'contact']

路线：['仪表板'，'配置文件']

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

请给我一个更好的方法。

这是我的代码:

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

<router-outlet></router-outlet>

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

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

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

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

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

Answer 1

存在布局和共享元素与路由结构不匹配的情况，或者一些元素必须根据每个路由隐藏/显示。对于这种情况，我可以想到以下策略(让我们以< code>app-header-main组件为例，但它显然适用于任何共享页面元素):

您可以提供输入或 css 类来控制共享元素的内部外观，例如：

< li > <代码>

或

或

在路由级别（子级或非子级）：

{
  path: 'home',
  component: HomeComponent,
  data: {
    header: {showUserTools: true},
  },
},

并通过Activated Route访问它，如下所示：this.route.data.header.showUserTools

在应用程序标头主组件内部：

< code > @ Input()right side:template ref

输入类型模板参考

<app-header-main [rightSide]="rightside"></app-header-main>
<ng-template #rightside>your content here</ng-template>

您可以创作app-header-main，以便它使用命名的slot transclusion

app-header-main模板内部:

<代码>

用法：

<app-header-main class="no-user-tools">
  <div rightSide>your content here</div>
</app-header-main>

Answer 2

你可以用child例如。

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>

帖子讨论在不同的文件中分离路由

Answer 3

您可以使用子路由来解决问题。

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