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

【问题标题】：How to access to an ngModel element inside a reusable component如何访问可重用组件内的 ngModel 元素
【发布时间】：2021-08-06 00:33:17
【问题描述】：

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

以下代码返回未定义

@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}}">

【问题讨论】：

标签： angular typescript angular-ngmodel

【解决方案1】：

试图通过ViewChild 获取的元素在OnInit 生命周期事件中没有准备好。可以在AfterViewInit生命周期事件中获取元素。

来自Documentation

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

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

@ViewChild('nameAccessor') ngModel:NgModel;

ngOnInit(): void {

}

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

【讨论】：

但是如果我们创建例子我们可以看到ViewChild被设置在ngOnInit里面stackblitz.com/edit/angular-3nkvgr?file=app%2Fapp.component.ts这意味着如果ViewChild是静态查询那么我们可以在ngOnInit里面得到它的值
有趣。那么为什么文档会提到ngAfterViewInit？也许不是每次都可以在 OnInit 中？
我想他们忘记更新了。旧视图编译器确实如此
github.com/angular/angular/blob/… 创建节点时填充静态内容
也许吧。感谢您的 cmets

【解决方案2】：

您还必须使用@ViewChild 添加{read: NgModel}

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

【讨论】：

谢谢，这行得通。自已接受的答案发布以来，可能发生了一些变化。

【解决方案3】：

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

【讨论】：