无法使用 jquery 在角度组件中设置表单控件的值？

Question

我有一个 Angular 5 ui 项目。我的组件模板 html 中有一个文本区域。我正在尝试使用 jquery 从 component.ts 文件中为文本区域设置一个值。但是它不起作用。知道这里有什么问题。

     <textarea id="messageTxt" formControlName="message" rows="6" [placeholder]="'PLACEHOLDERS.MESSAGE' | translate" (keyup)="calculateMessagingSegmentCount(messageTxt.value)" #messageTxt></textarea>

从我的组件中我正在这样做

    @Component({
      selector: 'pc-sms-template-form',
      templateUrl: './sms-template-form.component.html',
      styleUrls: ['./sms-template-form.component.scss']
    })
    export class SmsTemplateFormComponent implements OnInit {
      ngOnInit() {

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

       }
    }

我已经正确导入了 jquery 并且没有编译错误但是 textarea 没有设置为值 FEDEX@@@@@@ 。任何想法可能是这种行为背后的原因。我知道在 Angular 组件中使用带有打字稿的 jquery 并不是很好。但由于某些特定要求，我必须使用jquery。

谢谢

Answer 1

您必须在 keyup 事件中做某事，您能否通过删除 keyup 进行检查，这应该可以解决您的问题。

我附上了工作快照供您参考。 working sample image

Answer 2

在渲染视图之前调用OnInit方法，请改用AfterViewInit方法：

@Component({
  selector: 'pc-sms-template-form',
  templateUrl: './sms-template-form.component.html',
  styleUrls: ['./sms-template-form.component.scss']
})
export class SmsTemplateFormComponent implements AfterViewInit{
  ngAfterViewInit() {

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

   }
}