typescript 显示注销页面时删除页眉和页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41972593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing header and footer when displaying logout page
提问by Vaibhav
I have added below code in my app.component.html
我在 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.
问题是当我呈现注销页面时，页眉和页脚仍然存在。这是正确的，因为我的标题也有用户信息。
Second thing is I have TempComponent and TempComponent1, when it renders I have to show header and footer in each component also.
第二件事是我有 TempComponent 和 TempComponent1，当它呈现时，我还必须在每个组件中显示页眉和页脚。
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.
有解决方案还是我应该改变我的方法？我不想复制和过去每个模板中的页眉和页脚。
回答by Garth Mason
One approach to avoid having header/footer in each page would be to change your routing so you have a another router-outletat the child level. Something like this:
避免在每个页面中包含页眉/页脚的一种方法是更改您的路由，以便router-outlet在子级别有另一个。像这样的东西：
const appRoutes: Routes = [
{
path: '',
children: [
{ path: '', component: HomeComponent },
{ path: 'temp', component: TempComponent },
{ path: 'temp2', component: TempComponent2 },
]
component: HomeComponent
},
{ path: 'logout', component: LogoutComponent },
{ path: '**', redirectTo: '' }
];
Then the top-level app.component.htmltemplate is just <router-outlet></router-outlet>
那么顶层app.component.html模板就是<router-outlet></router-outlet>
And the home.componenttemplate contains the header and footer elements and the child router outlet.
和home.component模板包含页眉和页脚元素和子路由器的出口。
The point here is that the header/footer are removed from the root template, so they won't appear everywhere.
这里的重点是页眉/页脚已从根模板中删除，因此它们不会出现在任何地方。
Anotherpossibility 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.
另一种可能性是，您可以为所有需要标准页眉/页脚的页面创建一个包装元素，而不是像您那样剪切/粘贴页眉和页脚，例如standard-page.component.
<app-header></app-header>
<ng-content></ng-content>
<app-footer></app-footer>
Then in Home, Temp, Temp2 (not Logout), you can wrap them as 'standard' pages that require header/footer.
然后在 Home、Temp、Temp2（不是注销）中，您可以将它们包装为需要页眉/页脚的“标准”页面。
E.g. for TempComponent html.
例如，对于 TempComponent html。
<standard-page>
//TempComponent content here ..
</standard-page>
回答by Faly
You can add a method userIsLogged() in the app root component that returns true if the user is logged in and false if not (your component can use a service to check that). You can then use the structural directive *ngIf to hide the header and footer depending the return value of the method.
您可以在应用程序根组件中添加一个方法 userIsLogged()，如果用户登录则返回 true，否则返回 false（您的组件可以使用服务来检查）。然后，您可以使用结构指令 *ngIf 根据方法的返回值隐藏页眉和页脚。
<app-header *ngIf="userIsLogged()"></app-header>
<router-outlet></router-outlet>
<app-footer *ngIf="userIsLogged()></app-footer>
Updated Code :
更新代码：
<app-header *ngIf="userIsLogged()"></app-header>
<router-outlet></router-outlet>
<app-footer *ngIf="userIsLogged()"></app-footer>
回答by anshuVersatile
The best way to achieve this - is create separate route for login/logout/register/forget passwordpages but if you do not want to change your app structure then you can look out at NgSwitchwhich is switching views on basis of conditions
实现这一目标的最佳方法是为登录/注销/注册/忘记密码页面创建单独的路由，但如果您不想更改应用程序结构，那么您可以查看NgSwitch哪个根据条件切换视图
回答by Shailesh Bhardwaj
You should go for common approach-
您应该采用通用方法-
app.component.htmlcontains only:
app.component.html仅包含：
<router-outlet></router-outlet>
Other components html will be like:
其他组件 html 将类似于：
<app-header ></app-header>
<p>aboutus works!</p>
<app-footer ></app-footer>
Other components where you don't want header and/or footer remove
您不想删除页眉和/或页脚的其他组件
<app-header ></app-header>
and/or
和/或
<app-footer ></app-footer>
