Angular-6无法在“登录”页面和“注册”页面中隐藏应用程序页眉和页脚

Question

我是Angular-6的初学者，我创建了项目，然后在Create Account页面中遇到了一个小问题，并Sign in page显示了应用标题和应用页脚。但我不想在应用程序页眉和应用程序页脚上显示该页面，我想知道如何正确显示该页面apirequest page。

那是我的代码部分

app-routes.ts

export const Approutes: Routes = [
      {path: '', redirectTo: '/signup', pathMatch: 'full'},
      {path: 'home', component: HomeComponent},
      {path: 'signup', component: SignupComponent},
      {path: 'signin', component: SigninComponent},
      {path: 'forgotpassword', component: ForgotpasswordComponent},
      {path: 'apirequest', component: ApirequestComponent},
];

app.component.html

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

谢谢

Answer 1

在你的app.component.ts，你可以订阅Router.events。

import { Router, NavigationEnd } from '@angular/router';

constructor(
  private router: Router,
) { }

ngOnInit() {
  this.router.events
    .subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.headerFooter = (event.url !== '/login')
      }
    });
}

<app-header *ngIf="headerFooter"></app-header>
<router-outlet></router-outlet>
<app-footer *ngIf="headerFooter"></app-footer>

如果event.url等于，/login则显示元素，否则隐藏它们。您可以对要隐藏/显示页眉/页脚的任何URL路径运行检查，只需更新条件语句即可。