当使用Angular中的FormControl绑定时，如果文本中包含HTML实体（如&），则会导致<textarea>显示不正确。以下是可以解决这个问题的两种方法：</p> <ol> <li>使用内置的DOM解析器进行编码/解码</li> </ol> <pre><code>import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; @Component({ selector: 'app-textarea', template: ` <textarea [formControl]="textAreaControl"> `, }) export class TextAreaComponent implements OnInit { textAreaControl = new FormControl(''); ngOnInit() { this.textAreaControl.valueChanges.subscribe((value) => { const parser = new DOMParser(); const decoded = parser.parseFromString(value, 'text/html').body.textContent; this.textAreaControl.setValue(decoded, { emitEvent: false, emitModelToViewChange: false, emitViewToModelChange: false, }); }); } }

2. 使用文本模板进行解码

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-textarea',
  template: `
      
      
          {{ value }}
      
  `,
})
export class TextAreaComponent {
  textAreaControl = new FormControl('');
  @Input() set value(val: string) {
    const parser = new DOMParser();
    const decoded = parser.parseFromString(val, 'text/html').body.textContent;
    this.textAreaControl.setValue(decoded, {
      emitEvent: false,
      emitModelToViewChange: false,
      emitViewToModelChange: false,
    });
  }
  get value() {
    return this.textAreaControl.value;
  }
}