显示注销页面时删除页眉和页脚

问题描述

我在 app.component.html 中添加了以下代码

I have added below code in my app.component.html

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

在我的路由文件中我使用下面的代码

and in my routing file I am using below code

import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
    { path: '', component: Home },
    { path: 'temp', component: TempComponent },
    { path: 'temp2', component: TempComponent2 },
    { path: 'logout', component: LogoutComponent },
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

问题是当我呈现注销页面时，页眉和页脚仍然存在.这是正确的，因为我的标题也有用户信息.

The problem is when I render logout page the header and footer are still present. Which is in correct as my header has user information also.

第二件事是我有 TempComponent 和 TempComponent1，当它呈现时，我还必须在每个组件中显示页眉和页脚.

Second thing is I have TempComponent and TempComponent1, when it renders I have to show header and footer in each component also.

是否有解决方案或者我应该改变我的方法?我不想复制和粘贴每个模板中的页眉和页脚.

Is there a solution or should I change my approach? I don't want to copy and past the header and footer in each and every template.

推荐答案

避免在每个页面中出现页眉/页脚的一种方法是更改​​您的路由，以便您有另一个 router-outlet 在孩子级别.像这样:

One approach to avoid having header/footer in each page would be to change your routing so you have a another router-outlet at the child level. Something like this:

const appRoutes: Routes = [
    {
      path: '',
      children: [
        { path: '', component: HomeComponent },
        { path: 'temp', component: TempComponent },
        { path: 'temp2', component: TempComponent2 },
       ]
      component: HomeComponent
    },
    { path: 'logout', component: LogoutComponent },
    { path: '**', redirectTo: '' }
];

那么顶级的app.component.html模板就是

Then the top-level app.component.html template is just <router-outlet></router-outlet>

home.component 模板包含页眉和页脚元素以及子路由器出口.

And the home.component template contains the header and footer elements and the child router outlet.

这里的重点是页眉/页脚已从根模板中删除，因此它们不会出现在任何地方.

The point here is that the header/footer are removed from the root template, so they won't appear everywhere.

另一种可能性是，您可以为所有需要标准页眉/页脚的页面创建一个包装元素，而不是像您那样剪切/粘贴页眉和页脚.一个 standard-page.component.

Another possibility is that rather than cutting/pasting header and footer as you put it, you can create a wrapper element for all pages that want the standard header/footer e.g. a standard-page.component.

<app-header></app-header>
   <ng-content></ng-content>
<app-footer></app-footer>

然后在 Home、Temp、Temp2(不是注销)中，您可以将它们包装为需要页眉/页脚的标准"页面.

Then in Home, Temp, Temp2 (not Logout), you can wrap them as 'standard' pages that require header/footer.

例如用于 TempComponent html.

E.g. for TempComponent html.

<standard-page>
  //TempComponent content here ..
</standard-page>

这篇关于显示注销页面时删除页眉和页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！