Question

我的可重用组件中有一个ngModel组件。该字段不是表单的一部分。我想访问它来做一些改变。我尝试了下面的代码，但它在OnInit中未定义。你能告诉我如何访问它吗？

下面的代码返回undefined

@ViewChild('nameAccessor') ngModel:NgModel;
ngOnInit(): void {
    console.log(this.ngModel);
}

模板

<input ngModel (blur)="nameBoxChanged(nameAccessor)" (keyup)="nameBoxChanged(nameAccessor)" [ngClass]="{'redBorder':nameBoxValidator}"
      #nameAccessor [disabled]="pageStatus==4" name="name" id="name" type="text" class="form-control" placeholder="{{'movieCategory.placeHolder.name'|translate}}">

Answer 1

试图通过ViewChild获取的元素尚未在OnInit生命周期事件中准备就绪。您可以在AfterViewInit生命周期事件中获取该元素。

来自Documentation

在调用ngAfterViewInit回调之前设置视图查询。

代码块。在ngAfterViewInit回调中访问您的字段。

@ViewChild('nameAccessor') ngModel:NgModel;

ngOnInit(): void {

}

ngAfterViewInit(): void {
   console.log(this.ngModel);
}

Answer 2

在ngOnInit中，尚未设置@ViewChild。你应该使用ngAfterViewInit。

Answer 3

您还必须在@ViewChild 中添加{read: NgModel}

@ViewChild('nameAccessor', {read: NgModel}) ngModel:NgModel;

如何访问可重用组件内的ngModel元素

3 个答案: