如何在Angular网站的指定区域配置统一的页眉/页脚？

我来帮你搞定这个路由问题！你现在遇到的核心问题是路由配置没有设置父子嵌套关系，导致/pub/aboutus直接渲染AboutUsComponent，完全跳过了包含页眉页脚的PubComponent。

问题根源 #

当前你把pub和pub/aboutus配置成了同级路由，Angular导航到这两个路径时会分别渲染对应的独立组件，它们之间没有嵌套关联，所以AboutUsComponent自然不会继承PubComponent的页眉和页脚。

解决方案：配置嵌套路由 #

我们需要把aboutus设置为pub的子路由，让PubComponent作为父容器，负责显示页眉、页脚，同时通过自身的<router-outlet>加载子组件内容。

1. 修改pub-routing.module.ts的路由配置

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PubComponent } from './pub.component';
import { AboutUsComponent } from './aboutus/aboutus.component';

const rootRoutes: Routes = [
  { 
    path: 'pub', 
    component: PubComponent,
    // 定义子路由，所有/pub下的子路径都会在PubComponent的router-outlet中渲染
    children: [
      { path: 'aboutus', component: AboutUsComponent },
      // 可选：访问/pub根路径时的默认行为，留空则只显示页眉页脚
      { path: '', redirectTo: '', pathMatch: 'full' }
    ]
  }
];

@NgModule({
  // 移除这里的AboutUsComponent声明，统一移到PubModule中管理
  imports: [
    RouterModule.forChild(rootRoutes)
  ],
  exports: [RouterModule]
})
export class PubRoutingModule { }

2. 调整PubModule的组件声明

把AboutUsComponent移到PubModule的declarations数组中，保持模块结构的规范性：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PubRoutingModule } from './pub-routing.module';
import { PubComponent } from './pub.component';
import { AboutUsComponent } from './aboutus/aboutus.component'; // 导入子组件

@NgModule({
 declarations: [
  PubComponent,
  AboutUsComponent // 在这里统一声明模块内的组件
 ],
 imports: [
  CommonModule,
  PubRoutingModule
 ],
 exports: [
  PubRoutingModule
 ]
})
export class PubModule { }

效果验证 #

现在当你导航到/pub时，会显示PubComponent的页眉、页脚；导航到/pub/aboutus时，PubComponent的页眉和页脚会完整保留，同时在中间的<router-outlet>位置渲染AboutUsComponent的内容，完美实现你想要的继承效果！

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