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

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

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

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>

原文链接：https://www.f2er.com/angularjs/143761.html

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

猜你在找的Angularjs相关文章