Angular如何将WYSIWYG返回HTML的占位符替换为响应式表单select且保留布局

问题背景 #

从第三方API获取由WYSIWYG编辑器生成的字符串内容，其中可包含任意数量的HTML标签，需要将其中指定的占位符字符串替换为select下拉列表，同时满足两个要求：

1. 完全保留WYSIWYG返回的原有HTML结构，不破坏原有样式布局
2. 下拉列表可以和Angular响应式表单正常绑定，提交时可以拿到正确的选中值

此前尝试的两种方案均存在缺陷：

• 用自定义管道替换占位符后通过[innerHTML]渲染：样式完全符合预期，但Angular无法将动态生成的select注册为表单控件，提交时只能拿到默认值
• 用自定义组件封装下拉列表渲染：表单功能完全正常，但生成的HTML会额外包裹元素，破坏原有WYSIWYG的布局，复杂HTML场景下样式差异明显

可行解决方案 #

推荐使用DOM节点遍历替换+手动双向绑定的方案，既完全保留原有HTML结构，又能保证表单功能正常。核心思路是先把原始HTML渲染到容器，再遍历所有文本节点匹配占位符，原地替换为select元素，最后手动关联select和响应式表单控件。

完整代码实现 #

import { Component, ViewChild, ElementRef, Renderer2, AfterViewInit, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

// 占位符配置类型
interface ReplacementVariable {
  withBrackets: string;
  asString: string;
  answerOptions: {id: string | number, text: string}[];
}

@Component({
  selector: 'app-dynamic-dropdown-form',
  template: `
    <div #formContainer class="question__lead-in" [innerHTML]="safeRawHtml"></div>
    <button (click)="onSubmit()">提交表单</button>
  `
})
export class DynamicDropdownFormComponent implements OnInit, AfterViewInit {
  @ViewChild('formContainer') formContainer: ElementRef;
  multipleDropDownForm: FormGroup;
  safeRawHtml: SafeHtml;
  // 从API获取的WYSIWYG原始HTML字符串
  rawHtmlFromApi = `<p>There are [howmany] dropdowns in this question</p>`;
  // 占位符配置
  replacementVariables: ReplacementVariable[] = [
    {
      withBrackets: '[howmany]',
      asString: 'howmany',
      answerOptions: [
        {id: '1', text: 'One'},
        {id: '2', text: 'Two'}
      ]
    }
  ];

  constructor(
    private domSanitizer: DomSanitizer,
    private renderer: Renderer2
  ) {}

  ngOnInit(): void {
    // 初始化响应式表单
    this.generateForm();
    // 转换原始HTML为安全内容渲染
    this.safeRawHtml = this.domSanitizer.bypassSecurityTrustHtml(this.rawHtmlFromApi);
  }

  ngAfterViewInit(): void {
    // 页面渲染完成后替换占位符、绑定表单
    this.replacePlaceholdersBindForm();
  }

  generateForm(): void {
    const group: Record<string, FormControl> = {};
    this.replacementVariables.forEach(item => {
      group[item.asString] = new FormControl('', Validators.required);
    });
    this.multipleDropDownForm = new FormGroup(group);
  }

  replacePlaceholdersBindForm(): void {
    const container = this.formContainer.nativeElement;
    // 遍历容器下所有文本节点
    const treeWalker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null);
    const textNodes: Text[] = [];
    let currentNode;
    while (currentNode = treeWalker.nextNode()) {
      textNodes.push(currentNode);
    }

    textNodes.forEach(textNode => {
      const nodeText = textNode.textContent;
      if (!nodeText) return;

      this.replacementVariables.forEach(rv => {
        if (nodeText.includes(rv.withBrackets)) {
          const parentNode = textNode.parentNode;
          // 拆分文本为占位符前后两部分
          const [beforeText, afterText] = nodeText.split(rv.withBrackets);
          
          // 插入占位符前的文本
          parentNode.insertBefore(document.createTextNode(beforeText), textNode);
          
          // 创建select元素
          const selectEl = this.renderer.createElement('select');
          this.renderer.setAttribute(selectEl, 'name', rv.asString);
          // 插入选项
          rv.answerOptions.forEach(option => {
            const optionEl = this.renderer.createElement('option');
            this.renderer.setAttribute(optionEl, 'value', String(option.id));
            optionEl.textContent = option.text;
            this.renderer.appendChild(selectEl, optionEl);
          });
          // 插入select到DOM
          parentNode.insertBefore(selectEl, textNode);

          // 插入占位符后的文本
          if (afterText) {
            parentNode.insertBefore(document.createTextNode(afterText), textNode);
          }

          // 移除原文本节点
          parentNode.removeChild(textNode);

          // 双向绑定表单控件
          const formControl = this.multipleDropDownForm.get(rv.asString);
          if (formControl) {
            // 初始值同步到select
            selectEl.value = formControl.value;
            // select值变化同步到表单
            this.renderer.listen(selectEl, 'change', () => {
              formControl.setValue(selectEl.value);
              formControl.markAsDirty();
              formControl.markAsTouched();
            });
            // 表单值变化同步到select
            formControl.valueChanges.subscribe(val => {
              selectEl.value = val ?? '';
            });
          }
        }
      });
    });
  }

  onSubmit(): void {
    if (this.multipleDropDownForm.valid) {
      console.log('表单提交值：', this.multipleDropDownForm.value);
    }
  }
}

方案优势 #

1. 完全保留原有WYSIWYG生成的HTML结构，没有额外包裹元素，原有样式不会被破坏
2. 支持任意复杂的原始HTML结构，不管占位符嵌套在多少层标签内都能正确识别替换
3. 表单功能完全正常，支持表单校验、状态标记、双向绑定所有特性
4. 兼容所有Angular版本，不需要依赖额外第三方库

注：如果单个文本节点内存在多个占位符，只需调整文本拆分逻辑为循环匹配所有占位符即可。

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