Angular中如何获取组件内子元素的完整DOM引用

你遇到的报错有两个核心诱因：

1. 你要获取的<section #reference>写在<app-modal>组件内部，属于投影内容，如果<app-modal>内部没有用<ng-content>渲染投影内容、或者<app-modal>默认带*ngIf隐藏，在ngAfterViewInit阶段该元素还没有被渲染到DOM树中，@ViewChild无法捕获到对应元素，返回undefined。
2. 你预期的innerHTML绑定写法错误，直接写innerHTML='ref'是绑定了固定字符串ref，并不是组件内的ref变量，需要用属性绑定语法绑定变量。

方案1：调整ViewChild配置（适用于目标元素无*ngIf包裹的场景） #

修改组件TS代码，给@ViewChild加上static: true配置，确保视图初始化时就能捕获到静态元素：

import { ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

export class YourComponent implements AfterViewInit {
  // 加static: true适配静态元素查询
  @ViewChild('reference', { static: true }) ref!: ElementRef<HTMLElement>;
  // 存储处理后的HTML内容
  renderHtml: SafeHtml = '';

  constructor(private sanitizer: DomSanitizer) {}

  ngAfterViewInit(): void {
    if (this.ref?.nativeElement) {
      // 获取包含自身及所有子节点的完整HTML
      const rawHtml = this.ref.nativeElement.outerHTML;
      // 标记为安全内容，避免Angular默认过滤样式、自定义标签等内容
      this.renderHtml = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
      // 如果要传递DOM引用给其他组件，直接传this.ref.nativeElement即可，不需要转HTML字符串
    }
  }
}

修改模板的绑定写法：

<div [innerHTML]="renderHtml"></div>

方案2：监听ViewChild变更（适用于目标元素被*ngIf条件渲染的场景） #

如果<app-modal>默认是隐藏状态（带*ngIf判断），元素会在条件满足后才渲染，此时可以监听@ViewChild的变更通知：

@ViewChild('reference') ref!: ElementRef<HTMLElement>;
renderHtml: SafeHtml = '';

constructor(private sanitizer: DomSanitizer) {}

ngAfterViewInit(): void {
  // 监听元素的加载状态
  this.ref.changes.subscribe(() => {
    if (this.ref?.nativeElement) {
      const rawHtml = this.ref.nativeElement.outerHTML;
      this.renderHtml = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
    }
  })
}

• 如果你的使用场景不需要转成HTML字符串渲染，只是要把DOM引用传递给其他组件，直接传递this.ref.nativeElement这个原生DOM节点即可，不需要做HTML序列化和反序列化。
• 如果不需要保留HTML内的样式、脚本等特殊内容，可以不用DomSanitizer处理，直接绑定原始HTML字符串即可。

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