Angular运行时动态添加HTML元素：替换文本为输入框后显示为纯文本的问题求助

嘿，我完全懂你现在遇到的困扰！你把问题里的下划线替换成了输入框的HTML字符串，但用{{}}插值绑定后，Angular直接把这段HTML当成纯文本显示了，根本没渲染成真正的输入框，对吧？

这其实是Angular的安全机制在起作用——默认情况下，插值语法会自动转义HTML内容，防止XSS攻击，所以你的输入框标签才会原封不动地显示出来。下面给你两种解决方案，分别对应不同的场景：

场景1：只需要渲染静态HTML（无Angular指令） #

如果你的输入框不需要绑定ngModel、(change)这类Angular指令，只是一个纯静态的输入框，那可以用[innerHTML]结合DomSanitizer来解决：

1. 先在组件中注入DomSanitizer，标记HTML为安全内容：

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

@Component({
  // 组件元数据
})
export class YourComponent {
  blankField: SafeHtml | undefined;
  inputField = '<input class="form-control autofocus tertiary-bg-color answerField" type="text" required name="userAnswer" placeholder="Enter your answer here">';

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    // 替换下划线并标记为安全HTML
    this.blankField = this.sanitizer.bypassSecurityTrustHtml(
      this.fillInBlank?.question.replace('__________', this.inputField)
    );
  }
}

2. 修改模板，用[innerHTML]替代插值语法：

<div class="mb-2">
  <span class="me-2">{{fibNumber}}.</span>
  <span class="fw-semibold primary-color" [innerHTML]="blankField"></span>
</div>

场景2：需要Angular指令生效（比如ngModel、change事件） #

但这里有个关键问题：你输入框里用了[(ngModel)]和(change)这些Angular指令，[innerHTML]只能渲染静态HTML，不会编译这些Angular指令，就算显示出输入框，绑定的逻辑也完全没用。这种情况下，更推荐用符合Angular开发模式的做法：拆分问题文本，直接在模板中插入输入框组件。

1. 先把问题文本拆分成不含下划线的片段：

// 在组件中拆分字符串
questionParts: string[] = [];

ngOnInit() {
  this.questionParts = this.fillInBlank?.question.split('__________') || [];
}

2. 在模板中拼接文本和输入框：

<div class="mb-2">
  <span class="me-2">{{fibNumber}}.</span>
  <span class="fw-semibold primary-color">
    {{questionParts[0]}}
    <input class="form-control autofocus tertiary-bg-color answerField"
           type="text" required 
           [(ngModel)]="userAnswer" #userAnswerVar="ngModel"
           name="userAnswer" placeholder="Enter your answer here" 
           (change)="processAnswer()" [disabled]="answer !== null">
    {{questionParts[1]}}
  </span>
</div>

这种方式下，输入框的Angular指令能正常工作，也完全符合Angular的组件化思想，比动态插入HTML靠谱得多。

备注：内容来源于stack exchange，提问作者koque