Angular中textarea绑定[innerHTML]后如何获取用户编辑后的内容

• textarea 属于原生表单控件，用户在控件内输入的编辑内容会存储在DOM元素的value属性上，和innerHTML属性完全独立，页面上的输入修改不会同步更新到innerHTML。
• 使用[innerHTML]做绑定，仅会在Angular变更检测触发时，把json管道转换后的初始值写入textarea的内部HTML，既不会跟踪用户输入，也不会同步后续的内容修改，因此读取nativeElement.innerHTML永远只能拿到初始绑定值。
• json管道本身是单向格式化工具，仅负责把对象转成JSON字符串输出，不支持反向把编辑后的字符串解析回对象，无法支撑双向绑定逻辑。

优先选择符合Angular设计规范的双向绑定写法，无需手动操作原生DOM：

1. 先在TS侧处理初始值格式化，不要在模板双向绑定里直接套json管道：

// 编辑内容的绑定字段
tfoText: string = '';

// 接口拿到tso响应数据后，初始化编辑内容，用2空格缩进格式化JSON方便用户编辑
this.tfoText = JSON.stringify(this.tso, null, 2);

2. 模板里用ngModel做双向绑定，不需要加模板引用变量读DOM：

<textarea name="tfoText" 
          [(ngModel)]="tfoText"
          placeholder="Text Editor">
</textarea>

3. 保存逻辑里直接读取绑定字段即可，拿到的就是用户编辑后的最新内容：

// 保存事件逻辑
console.log(this.tfoText);
// 如果需要转回对象格式，手动调用JSON.parse即可
// const updatedTso = JSON.parse(this.tfoText);

如果确实需要通过ViewChild读取原生DOM值，按以下方式调整：

1. 模板里把[innerHTML]改成绑定[value]属性，不要绑定innerHTML：

<textarea name="tfoText" 
          [value]="tso | json"
          #myItem
          placeholder="Text Editor">
</textarea>

2. TS侧读取时取value属性，不要读innerHTML：

@ViewChild('myItem', { static: true })
myItem!: ElementRef<HTMLTextAreaElement>;

// 保存事件逻辑
const latestContent = this.myItem.nativeElement.value;
console.log(latestContent);

注意：所有可编辑的原生表单控件（input、textarea、select等），都不要用[innerHTML]做内容绑定，这类控件的用户交互内容都维护在value属性上，innerHTML仅用于普通元素的HTML内容渲染。

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