另一个页面上的不同导航栏和页脚 Angular

Question

Angular CLI：9.1.7

我是 Angular 的新手，希望在用户导航到主页以外的其他组件、登录、注册和忘记密码时显示完全不同的顶部导航栏、边栏和页脚方面得到一些帮助.

仪表板上显示了新的顶部导航栏和侧边栏，但仍显示旧导航栏 <app-header></app-header> 和页脚 <app-footer></app-footer>。

当用户不在主页、登录、注册和忘记密码页面时，如何让 <app-header></app-header> 和 <app-footer></app-footer> 不显示？

app.component.html

 <!-- header -->
<app-header></app-header>
    
<!-- routes will be rendered here -->
<router-outlet></router-outlet>

<!-- footer -->
<app-footer></app-footer>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'apptitle';
}

app-routing.module.ts

const routes: Routes = [{
  path: '',
  pathMatch: 'full',
  component: HomeComponent
},
{
  path: 'login',
  component: LoginComponent
},
{
  path: 'signup',
  component: SignupComponent
},
{
  path: 'forgot-password',
  component: ForgotPasswordComponent
},
{
  path: 'dashboard',
  component: DashboardComponent
},
if the user tries to navigate to a page that is not there
  { path: '**',
  component:  HomeComponent}
];

dashboard.component.html

<app-top-menu-bar></app-top-menu-bar>
<app-side-menu-bar></app-side-menu-bar>
<app-small-footer></app-small-footer>

Answer 1

将激活到 app.component.ts

中的路由器插座

<router-outlet (activate)="showHide($event)"></router-outlet>

在app.component.ts

isShow=true;
showHide(event){
    if(event instanceof YourComponent) {this.isShow=false}else{ this.isShow=true};
 }

在 html 中与 ngIf

一起使用

<app-header *ngIf="isShow"></app-header>
    
<!-- routes will be rendered here -->

<app-footer *ngIf="isShow"></app-footer>

Answer 2

我个人会添加一个新路由，例如 newCompWithDifferentHeaderAndFooter，这将包含不同的页眉和页脚，如果想让用户看到不同的差异，我会这样做 url。但是，如果 url 必须保持完整，我会把页眉和页脚换成正确的。

请记住，如果您采用新路线方法，则必须添加新路线，并且如果您想要更有条理，请将当前页眉和页脚放入具有页脚或页眉名称的文件夹中，并将特定名称放入每个页眉和页脚更容易找到它们。

另一个页面上的不同导航栏和页脚 Angular

Different Navigation Bars and Footer on another page Angular

angular

routes

navigation

angular-components