Angular公共布局如何基于不同路由自定义修改头部和侧边栏内容？

完全可以实现你描述的需求，有两种常用的落地方式：

方案1：使用Angular原生命名路由出口 #

这是Angular路由内置的多出口能力，直接通过配置路由规则就能实现不同插槽的内容渲染。

步骤1：根组件定义命名出口 #

给不同位置的router-outlet添加name属性区分插槽：

<!-- app.component.html -->
<header>
  <!-- 公共头部默认内容 -->
  <div class="header-public">...</div>
  <!-- 头部自定义插槽出口 -->
  <router-outlet name="headerSlot"></router-outlet>
</header>
<nav>
  <!-- 公共侧边栏默认内容 -->
  <div class="nav-public">...</div>
  <!-- 侧边栏自定义插槽出口 -->
  <router-outlet name="navSlot"></router-outlet>
</nav>
<main>
  <!-- 主内容默认出口 -->
  <router-outlet></router-outlet>
</main>

步骤2：路由规则配置 #

给需要自定义插槽内容的页面配置对应出口的渲染组件：

// app-routing.module.ts
const routes: Routes = [
  // 普通页面：仅渲染主内容，头部侧边栏用默认公共内容
  {
    path: 'normal',
    component: NormalPageComponent
  },
  // 特殊页面page1：自定义头部+主内容，侧边栏用默认
  {
    path: 'page1',
    children: [
      { path: '', component: Page1MainComponent },
      { path: '', component: Page1HeaderComponent, outlet: 'headerSlot' }
    ]
  },
  // 特殊页面page2：自定义侧边栏+主内容，头部用默认
  {
    path: 'page2',
    children: [
      { path: '', component: Page2MainComponent },
      { path: '', component: Page2NavComponent, outlet: 'navSlot' }
    ]
  }
];

普通路由未配置对应出口的组件时，命名出口不会渲染任何内容，公共默认内容正常展示，符合按需插入的需求。

方案2：服务+模板投影（更灵活，无需拆分多组件） #

如果自定义插槽内容和页面主逻辑耦合度高，不想拆成独立组件，可以用全局服务传递模板引用的方式实现，更接近你示例中的content #1写法。

步骤1：定义布局插槽管理服务 #

// layout.service.ts
import { Injectable, TemplateRef } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LayoutService {
  // 存储各个插槽的模板引用
  headerTemplate?: TemplateRef<any>;
  navTemplate?: TemplateRef<any>;
}

步骤2：根组件渲染插槽模板 #

<!-- app.component.html -->
<header>
  <div class="header-public">...</div>
  <ng-container *ngTemplateOutlet="layoutService.headerTemplate"></ng-container>
</header>
<nav>
  <div class="nav-public">...</div>
  <ng-container *ngTemplateOutlet="layoutService.navTemplate"></ng-container>
</nav>
<main>
  <router-outlet></router-outlet>
</main>

// app.component.ts
import { LayoutService } from './layout.service';

@Component({...})
export class AppComponent {
  constructor(public layoutService: LayoutService) {}
}

步骤3：页面组件按需传入自定义模板 #

// page1.component.ts
import { Component, TemplateRef, ViewChild } from '@angular/core';
import { LayoutService } from './layout.service';

@Component({
  selector: 'app-page1',
  template: `
    <!-- 自定义头部模板，不会直接渲染在页面内 -->
    <ng-template #headerTpl>
      <a>Login</a>
    </ng-template>

    <!-- 页面主内容 -->
    <div>... 页面1主内容 ...</div>
  `
})
export class Page1Component {
  @ViewChild('headerTpl') headerTpl!: TemplateRef<any>;

  constructor(private layoutService: LayoutService) {}

  ngAfterViewInit() {
    // 传入自定义头部模板
    this.layoutService.headerTemplate = this.headerTpl;
  }

  ngOnDestroy() {
    // 页面销毁时清空模板，恢复默认公共内容
    this.layoutService.headerTemplate = undefined;
  }
}

方案选择建议 #

• 自定义插槽内容独立、和主页面逻辑耦合度低：选择命名路由出口方案
• 自定义插槽内容和主页面逻辑关联强、需要共享状态：选择服务+模板投影方案

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