Angular5：如何向路由外的复用头部组件注入动态HTML内容

这个场景我太熟悉了！因为头部在路由出口外面，ng-content确实派不上用场——毕竟它只能处理当前组件树内的内容传递。这里有几个经过实践验证的方案，你可以根据自己的需求选：

方案一：利用路由数据传递组件，动态加载到头部 #

如果每个路由的头部内容比较复杂（需要绑定数据、有交互逻辑），这个方案最适合。核心思路是在路由配置里给每个路由指定专属的头部内容组件，然后在头部组件里监听路由变化，动态创建并渲染这个组件。

步骤1：配置路由数据 #

在路由定义中添加headerContentComponent字段，指向对应的头部内容组件：

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    data: {
      title: '首页',
      description: '欢迎来到首页',
      headerContentComponent: HomeHeaderContentComponent // 自定义的头部内容组件
    }
  },
  {
    path: 'about',
    component: AboutComponent,
    data: {
      title: '关于我们',
      description: '了解我们的故事',
      headerContentComponent: AboutHeaderContentComponent
    }
  }
];

步骤2：改造头部组件 #

在头部组件中监听路由变化，获取当前路由的data，并动态渲染指定的组件：

import { Component, ViewChild, ViewContainerRef, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-header',
  template: `
    <div class="header">
      <h1>{{ currentRouteData?.title }}</h1>
      <p>{{ currentRouteData?.description }}</p>
      <!-- 动态内容的容器 -->
      <div #headerContentContainer></div>
    </div>
  `
})
export class HeaderComponent implements OnInit, OnDestroy {
  @ViewChild('headerContentContainer', { read: ViewContainerRef }) contentContainer!: ViewContainerRef;
  currentRouteData: any;
  private routerSub!: Subscription;

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

  ngOnInit() {
    // 监听路由导航结束事件，获取当前路由的完整数据
    this.routerSub = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 遍历路由树，找到当前激活的叶子路由
      let currentRoute = this.activatedRoute.root;
      while (currentRoute.firstChild) {
        currentRoute = currentRoute.firstChild;
      }
      this.currentRouteData = currentRoute.snapshot.data;
      // 渲染动态头部内容
      this.renderHeaderContent();
    });
  }

  private renderHeaderContent() {
    // 清空之前的内容，避免残留
    this.contentContainer.clear();
    const ContentComponent = this.currentRouteData?.headerContentComponent;
    if (ContentComponent) {
      // 创建并挂载指定的头部内容组件
      this.contentContainer.createComponent(ContentComponent);
    }
  }

  ngOnDestroy() {
    // 销毁订阅，防止内存泄漏
    this.routerSub.unsubscribe();
  }
}

优点：内容是独立组件，可维护性强，支持复杂逻辑和数据绑定；缺点：需要为每个路由创建额外的组件，适合内容复杂的场景。

方案二：通过服务传递HTML片段（适合简单内容） #

如果只是需要展示简单的HTML内容（比如按钮、图片），可以用服务来传递内容，再通过[innerHTML]渲染。

步骤1：创建头部内容服务 #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Injectable({ providedIn: 'root' })
export class HeaderContentService {
  private headerContentSubject = new BehaviorSubject<SafeHtml>('');
  headerContent$ = this.headerContentSubject.asObservable();

  constructor(private sanitizer: DomSanitizer) {}

  setHeaderContent(content: string) {
    // 处理HTML内容，避免XSS风险
    const safeContent = this.sanitizer.bypassSecurityTrustHtml(content);
    this.headerContentSubject.next(safeContent);
  }
}

步骤2：在路由组件中设置内容 #

在每个路由组件的ngOnInit里调用服务设置头部内容：

import { Component, OnInit } from '@angular/core';
import { HeaderContentService } from './header-content.service';

@Component({
  selector: 'app-home',
  template: `<p>首页内容</p>`
})
export class HomeComponent implements OnInit {
  constructor(private headerContentService: HeaderContentService) {}

  ngOnInit() {
    this.headerContentService.setHeaderContent(`<button class="home-btn">返回首页</button>`);
  }
}

步骤3：在头部组件中订阅内容 #

import { Component, OnInit } from '@angular/core';
import { HeaderContentService } from './header-content.service';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-header',
  template: `
    <div class="header">
      <h1>{{ currentRouteData?.title }}</h1>
      <p>{{ currentRouteData?.description }}</p>
      <div [innerHTML]="headerContent"></div>
    </div>
  `
})
export class HeaderComponent implements OnInit {
  currentRouteData: any;
  headerContent: SafeHtml = '';

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

  ngOnInit() {
    // 监听路由变化获取标题和描述
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      let currentRoute = this.activatedRoute.root;
      while (currentRoute.firstChild) {
        currentRoute = currentRoute.firstChild;
      }
      this.currentRouteData = currentRoute.snapshot.data;
    });

    // 订阅头部内容更新
    this.headerContentService.headerContent$.subscribe(content => {
      this.headerContent = content;
    });
  }
}

优点：实现简单，不需要额外组件；缺点：不支持复杂逻辑和数据绑定，要注意XSS安全。

方案三：结合ng-template和服务传递模板（兼顾灵活和简单） #

如果希望在路由组件里用Angular模板定义头部内容（支持指令、数据绑定），可以用TemplateRef结合服务传递。

步骤1：创建模板服务 #

import { Injectable } from '@angular/core';
import { BehaviorSubject, TemplateRef } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class HeaderTemplateService {
  private headerTemplateSubject = new BehaviorSubject<TemplateRef<any> | null>(null);
  headerTemplate$ = this.headerTemplateSubject.asObservable();

  setHeaderTemplate(template: TemplateRef<any> | null) {
    this.headerTemplateSubject.next(template);
  }
}

步骤2：在路由组件中定义并传递模板 #

import { Component, OnInit, ViewChild, TemplateRef, OnDestroy } from '@angular/core';
import { HeaderTemplateService } from './header-template.service';

@Component({
  selector: 'app-about',
  template: `
    <ng-template #headerTemplate>
      <div class="about-header">
        <img src="/assets/about-logo.png" alt="About Logo">
        <p>这是关于页面的专属头部内容，支持{{ someData }}绑定</p>
      </div>
    </ng-template>
    <p>关于页面的主体内容</p>
  `
})
export class AboutComponent implements OnInit, OnDestroy {
  @ViewChild('headerTemplate') headerTemplate!: TemplateRef<any>;
  someData = '数据';

  constructor(private headerTemplateService: HeaderTemplateService) {}

  ngOnInit() {
    this.headerTemplateService.setHeaderTemplate(this.headerTemplate);
  }

  ngOnDestroy() {
    // 组件销毁时清空模板，避免影响其他路由
    this.headerTemplateService.setHeaderTemplate(null);
  }
}

步骤3：在头部组件中渲染模板 #

import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { HeaderTemplateService } from './header-template.service';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-header',
  template: `
    <div class="header">
      <h1>{{ currentRouteData?.title }}</h1>
      <p>{{ currentRouteData?.description }}</p>
      <div #templateContainer></div>
    </div>
  `
})
export class HeaderComponent implements OnInit {
  @ViewChild('templateContainer', { read: ViewContainerRef }) templateContainer!: ViewContainerRef;
  currentRouteData: any;

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

  ngOnInit() {
    // 监听路由变化获取标题描述
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      let currentRoute = this.activatedRoute.root;
      while (currentRoute.firstChild) {
        currentRoute = currentRoute.firstChild;
      }
      this.currentRouteData = currentRoute.snapshot.data;
    });

    // 订阅模板并渲染
    this.headerTemplateService.headerTemplate$.subscribe(template => {
      this.templateContainer.clear();
      if (template) {
        this.templateContainer.createEmbeddedView(template);
      }
    });
  }
}

优点：支持Angular模板的所有特性，不需要额外创建组件；缺点：需要在每个路由组件里定义模板，适合中等复杂度的内容。

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