如何在Angular中渲染无导航栏和页面标题的404NotFound页面

这里提供两种可靠的实现方式：

方法一：通过路由监听控制显示/隐藏 #

在app.component.ts中注入路由服务，监听路由变化，判断当前是否为404页面，再通过变量控制标题和导航的显示：

1. 修改app.component.ts：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

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

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      const currentComponent = this.activatedRoute.firstChild?.component;
      this.showHeaderNav = currentComponent !== PageNotFoundComponent;
    });
  }
}

2. 修改app.component.html，给标题和导航添加*ngIf指令：

<h2 *ngIf="showHeaderNav">Bonsai Store Ap</h2>
<nav *ngIf="showHeaderNav">
    <a class="button" routerLink="/products" routerLinkActive="activebutton" ariaCurrentWhenActive="page">Products</a> |
    <a class="button" routerLink="/cart" routerLinkActive="activebutton" ariaCurrentWhenActive="page">Shopping Cart</a>
</nav>
<router-outlet></router-outlet>

方法二：使用布局路由（更适合复杂项目） #

通过创建布局组件，将需要显示导航的页面归入布局路由下，404页面直接挂载在根路由，完全独立于布局：

1. 创建MainLayoutComponent（主布局组件）：

<!-- main-layout.component.html -->
<h2>Bonsai Store Ap</h2>
<nav>
    <a class="button" routerLink="/products" routerLinkActive="activebutton" ariaCurrentWhenActive="page">Products</a> |
    <a class="button" routerLink="/cart" routerLinkActive="activebutton" ariaCurrentWhenActive="page">Shopping Cart</a>
</nav>
<router-outlet></router-outlet>

2. 修改app.module.ts中的路由配置，将products和cart作为MainLayoutComponent的子路由：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { ProductsListComponent } from './products-list/products-list.component';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { MainLayoutComponent } from './main-layout/main-layout.component';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { 
        path: '', 
        component: MainLayoutComponent,
        children: [
          { path: 'products', component: ProductsListComponent },
          { path: 'cart', component: ShoppingCartComponent },
          { path: '', redirectTo: '/products', pathMatch: 'full' }
        ]
      },
      { path: '**', component: PageNotFoundComponent }
    ]),
    FormsModule,
  ],
  declarations: [
    AppComponent,
    ProductsListComponent,
    ShoppingCartComponent,
    PageNotFoundComponent,
    MainLayoutComponent
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. 修改app.component.html，只保留根路由出口：

<router-outlet></router-outlet>

这种方式的优势在于，后续新增需要显示导航的页面时，只需添加到布局的子路由中，无需修改其他逻辑，扩展性更强。

内容的提问来源于stack exchange，提问作者Ephrat Negussie