Question

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

是否有解决方案或我应该改变方法？我不想在每个模板中复制和浏览页眉和页脚。

Answer 1

避免在每个页面中使用页眉/页脚的一种方法是更改路由，以便在子级别上有另一个render() { ... <Row> <Col md={4} xs={12} xsOffset={1}> <form> <label className="btn btn-primary"> <i className="glyphicon glyphicon-envelope"></i> <input type="checkbox" /> Checkbox </label>。像这样：

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

<router-outlet></router-outlet>模板包含页眉和页脚元素以及子路由器插座。

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

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

standard-page.component

然后在Home，Temp，Temp2（不是Logout）中，您可以将它们包装为需要页眉/页脚的“标准”页面。

E.g。对于TempComponent html。

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

Answer 2

您可以在app根组件中添加方法userIsLogged（），如果用户已登录则返回true，否则返回false（您的组件可以使用服务来检查）。然后，您可以使用结构指令* ngIf来隐藏页眉和页脚，具体取决于方法的返回值。

<app-header *ngIf="userIsLogged()"></app-header>
<router-outlet></router-outlet>
<app-footer *ngIf="userIsLogged()></app-footer>

更新代码：

    <app-header *ngIf="userIsLogged()"></app-header>
    <router-outlet></router-outlet>
    <app-footer *ngIf="userIsLogged()"></app-footer>

Answer 3

非常简单，只需在应用程序页眉和应用程序页脚标记中使用* ngif

您的 app.component.html 代码类似于

<app-header *ngif="router.url !== '/logout' " ></app-header>
<router-outlet></router-outlet>
<app-footer *ngif="router.url !== '/logout' " ></app-footer>

不要忘记在 app.component.ts

中添加带有路由器的以下构造函数

export class AppComponent {

     constructor(public router: Router){}
}

通过这种方式，您无需更改方法就可以得到想要的东西！

Answer 4

实现这一目标的最佳方法是为登录/注销/注册/忘记密码页面创建单独的路由，但如果您不想更改您的应用程序结构，那么您可以查看{{ 1}}根据条件切换视图

Answer 5

您应该采用通用方法-

app.component.html 仅包含：

<router-outlet></router-outlet>

其他html组件如下：

<app-header ></app-header>
<p>aboutus works!</p>
<app-footer ></app-footer>

您不希望删除页眉和/或页脚的其他组件

<app-header ></app-header>

和/或

<app-footer ></app-footer>

显示注销页面

5 个答案: