另一页上的不同导航栏和页脚角度

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>

应用程序组件.ts

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

应用程序路由模块.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中看到差异，我会这样做。但是，如果网址必须保持完整，我只会把页眉和页脚换成正确的。

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