本文介绍如何在 angular 中安全、动态地将表单控件（如带 `ngmodel` 的 ``）嵌入到含下划线占位符（如 `__________`）的文本中，避免 html 字符串被转义，并确保数据绑定与事件监听正常工作。
在 Angular 中，直接使用字符串替换（如 replace('__________', '')）并用 {{blankField}} 渲染，会导致 HTML 被自动转义为纯文本——这是 Angular 默认的安全机制，防止 XSS 攻击。因此，不能通过插值或 innerHTML 绑定动态生成含指令（如 [(ngModel)]、(change)、[disabled]）的元素，因为这些结构化指令仅在模板编译阶段由 Angular 解析执行，运行时注入的字符串无法触发指令生命周期。
✅ 正确方案是：利用 Angular 的 Renderer2 + 自定义指令 + 静态预置控件节点，实现“语义化拆分+DOM重组”，而非 HTML 字符串拼接。
✅ 推荐实现方式：指令驱动的占位符替换
核心思路：
- 在模板中静态声明一个真实 元素（含完整 ngModel、事件和属性绑定），作为“控件模板”；
- 通过自定义指令（如 appReplaceUnderscores）捕获该 节点；
- 将问题文本按 __________ 拆分为前后两段；
- 使用 Renderer2 动态创建文本节点（createText()）和容器 ，并按序插入 DOM，使 居中嵌入文本流。
? 模板用法（组件 HTML）
<div class="mb-2">
<span class="me-2">{{fibNumber}}.</span>
<span class="fw-semibold primary-color"
[appReplaceUnderscores]="fillInBlank?.question">
<!-- 静态控件：Angular 编译器会解析其指令 -->
<input [(ngModel)]="userAnswer"
class="form-control autofocus tertiary-bg-color answerField d-inline"
type="text"
required
name="userAnswer"
placeholder="Enter your answer here"
(change)="processAnswer()"
[disabled]="answer !== null">
</span>
</div>⚠️ 注意： 必须放在指令宿主元素内部（如 ），才能被指令通过 ElementRef 安全获取。
? 自定义指令代码（replace-underscores.directive.ts）
import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
@Directive({
selector: '[appReplaceUnderscores]'
})
export class ReplaceUnderscoresDirective {
@Input() set appReplaceUnderscores(question: string) {
this.replaceUnderscore(question);
}
constructor(
private el: ElementRef<HTMLElement>,
private renderer: Renderer2
) {}
private replaceUnderscore(question: string): void {
const nativeElement = this.el.nativeElement;
let inputNode: Node | null = null;
// 查找并保留原始 input 节点，移除其他子节点（如空白文本）
Array.from(nativeElement.childNodes).forEach(node => {
if (node.nodeName === 'INPUT') {
inputNode = node;
} else {
this.renderer.removeChild(nativeElement, node);
}
});
if (!inputNode) {
console.warn('No input element found in directive host.');
return;
}
const parts = question.split('__________');
if (parts.length < 2) {
console.warn('Question does not contain expected underscore placeholder.');
return;
}
// 创建前后文本节点
const textBefore = this.renderer.createText(parts[0]);
const textAfter = this.renderer.createText(parts[1]);
// 包裹文本的 span（确保 inline 布局）
const spanBefore = this.renderer.createElement('span');
this.renderer.appendChild(spanBefore, textBefore);
this.renderer.addClass(spanBefore, 'd-inline');
const spanAfter = this.renderer.createElement('span');
this.renderer.appendChild(spanAfter, textAfter);
this.renderer.addClass(spanAfter, 'd-inline');
// 插入 DOM：before → input → after
this.renderer.insertBefore(nativeElement, spanBefore, inputNode);
this.renderer.insertBefore(nativeElement, inputNode, spanAfter);
}
}✅ 关键优势与注意事项
| 特性 | 说明 |
|---|---|
| 指令可复用 | 同一指令可处理多个填空题，只需传入不同 question 和绑定不同 ngModel 变量。 |
| 绑定完全生效 | [(ngModel)]、(change)、[disabled] 等均由 Angular 编译期解析，不受运行时 DOM 操作影响。 |
| 安全无 XSS | 不使用 innerHTML 或 DomSanitizer.bypassSecurityTrustHtml()，规避潜在风险。 |
| 样式可控 | 所有文本/输入框均支持 Bootstrap 类（如 d-inline, form-control）或自定义 CSS。 |
| 扩展性强 | 支持多处下划线（修改 split() 逻辑为 split(/_{8,}/g) 并循环插入多个 ）。 |
? 进阶提示：支持多个空格占位符
若题目含多个填空（如 "A __ is a __."），可升级指令：
const placeholders = question.match(/_{8,}/g) || [];
const parts = question.split(/_{8,}/g);
// 循环创建 input（需提前提供 inputNodes 数组，或动态克隆）
parts.forEach((part, i) => {
const textNode = this.renderer.createText(part);
const span = this.renderer.createElement('span');
this.renderer.appendChild(span, textNode);
this.renderer.addClass(span, 'd-inline');
this.renderer.appendChild(nativeElement, span);
if (i < placeholders.length && inputTemplate) {
const clonedInput = this.renderer.cloneNode(inputTemplate, true);
this.renderer.appendChild(nativeElement, clonedInput);
}
});✅ 总结：Angular 的响应式能力依赖于编译时模板结构。动态渲染交互元素，应优先选择“预置指令节点 + Renderer2 重组 DOM”模式，而非字符串注入——既保障安全性，又不失功能完整性。
