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

【问题标题】：Different Navigation Bars and Footer on another page Angular另一个页面上的不同导航栏和页脚Angular
【发布时间】：2020-11-07 12:17:42
【问题描述】：

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>

【问题讨论】：

标签： angular routes navigation angular-components

【解决方案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>

【讨论】：

【解决方案2】：

我会亲自添加一个新路由，例如 newCompWithDifferentHeaderAndFooter，这将包含不同的页眉和页脚，如果希望用户看到不同的 url，我会这样做。但如果 url 必须保持不变，我只需将页眉和页脚换成正确的。

请记住，如果您使用新路由方法，则必须添加一条新路由，如果您想更有条理，请将当前页眉和页脚放在具有页脚或页眉名称的文件夹中，并为每个页眉添加特定名称和页脚，以便更轻松地找到它们。

【讨论】：