javascript - 无法使用 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@@@@@@。任何想法可能是这种行为背后的原因。我知道jquery在 angular 组件中使用 typescript 并不是很好。但由于某些特定要求，我必须使用jquery.

感谢

标签： javascriptjqueryangulartypescript

Answer 1

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@@@@@@ ");

   }
}