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

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

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

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

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

问题是当我呈现注销页面时，页眉和页脚仍然存在。这是正确的，因为我的标题也有用户信息。
第二件事是我有tempcomponent和tempcomponent1，当它呈现时，我还必须在每个组件中显示页眉和页脚。
有没有解决办法，或者我应该改变我的方法？我不想复制每个模板中的页眉和页脚。

最佳答案

避免每页都有页眉/页脚的一种方法是更改路由，以便在子级有另一个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: '' }
];

那么顶层模板就是
app.component.html模板包含页眉和页脚元素以及子路由器出口。
这里的要点是页眉/页脚从根模板中删除，因此它们不会出现在任何地方。
另一种可能性是，您可以为所有需要标准页眉/页脚的页面（例如a<router-outlet></router-outlet>）创建包装元素，而不是像您所说的那样剪切/粘贴页眉和页脚。

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

然后在home、temp、temp2（不是注销）中，可以将它们包装为需要页眉/页脚的“标准”页面。
例如，对于tempcomponent html。

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

关于angular - 显示注销页面时删除页眉和页脚，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41972593/