Angular 5组件中使用jQuery设置textarea值无效，求排查方案

咱们先拆解下你遇到的核心问题，一步步来解决：

1. DOM元素未完成渲染，jQuery无法定位目标 #

Angular的ngOnInit钩子触发时机是组件初始化完成，但视图还没完全渲染到DOM中。这时候你的textarea还没被挂载到页面上，$('#messageTxt')根本找不到对应的元素，自然设置值不会生效。

解决办法很简单：把jQuery的赋值代码移到ngAfterViewInit钩子中——这个钩子会在组件视图（包括所有子元素）完全渲染完成后触发，此时DOM里已经存在目标textarea，jQuery能正常选中它：

ngAfterViewInit() {
  $('#messageTxt').val("FEDEX@@@@@@ ");
}

2. 表单控件与DOM值不同步的隐藏坑 #

就算解决了DOM渲染的问题，还有个容易忽略的点：你的textarea绑定了formControlName="message"，Angular的表单控件（FormControl）会独立维护自己的状态和值。你用jQuery直接修改DOM的value，Angular的FormControl完全感知不到这个变化，后续Angular的变更检测甚至可能把FormControl的原有值重新同步到DOM，覆盖你设置的内容。

所以如果必须用jQuery，你需要在设置DOM值后，手动同步表单控件的状态：

import { ViewChild, ElementRef } from '@angular/core';
// ...
@ViewChild('messageTxt') messageTxt: ElementRef;

ngAfterViewInit() {
  const targetVal = "FEDEX@@@@@@ ";
  // 用jQuery设置DOM值
  $('#messageTxt').val(targetVal);
  // 方式1：直接更新FormControl的值
  this.yourFormGroup.get('message')?.setValue(targetVal);
  // 方式2：触发input事件让Angular自动检测变化（适合不想直接操作表单组的场景）
  this.messageTxt.nativeElement.dispatchEvent(new Event('input'));
}

（注意把yourFormGroup替换成你组件中实际定义的表单组变量名）

另外补充个小细节：你模板里已经定义了#messageTxt模板引用变量，其实不用jQuery也能直接操作原生元素，但既然你有特定需求必须用jQuery，上面的方案完全适用。

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