显示注销页面时删除页眉和页脚 [英] Removing header and footer when displaying logout page
问题描述
我在我的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
模板就是<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>
然后在主页",温度","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>
这篇关于显示注销页面时删除页眉和页脚的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!