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

发布时间：2020-12-17 07:59:17 所属栏目：安全来源：网络整理

导读：我在app.component.html中添加了以下代码 app-header /app-headerrouter-outlet/router-outletapp-footer /app-footer 在我的路由文件中,我使用下面的代码 import { Routes,RouterModule } from '@angular/router';const appRoutes: Routes = [ { path: '',c

我在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,当它呈现时我也必须在每个组件中显示页眉和页脚.

有解决方案还是我应该改变方法？我不想复制并浏览每个模板中的页眉和页脚.

避免在每个页面中使用页眉/页脚的一种方法是更改??路由,以便在子级别上有另一个路由器插座.像这样的东西：

const appRoutes: Routes = [
    { 
      path: '',children: [
        { path: '',component: HomeComponent },]
      component: HomeComponent
    },redirectTo: '' }
];

然后,顶级app.component.html模板只是< router-outlet>< / router-outlet>

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

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

另一种可能性是,您可以为所有需要标准页眉/页脚的页面创建包装元素,而不是在插入时剪切/粘贴页眉和页脚.一个标准的page.component.

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

然后在Home,Temp,Temp2(不是Logout)中,您可以将它们包装为需要页眉/页脚的“标准”页面.

例如.对于TempComponent html.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!