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

Question

我在可重用的组件内部有一个ngModel组件。该字段不是表单的一部分。我想要访问它以进行一些更改。我尝试了下面的代码，但在初始化时结果为"undefined"。您能告诉我如何访问它吗？

以下代码返回"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}}">

- rematnarab

Answer 1

您还需要在@ViewChild中添加{read: NgModel}

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

- Anik

---

谢谢，这个方法可行。也许自从被接受的答案发布以来有些变化了。 - ach

Answer 2

使用ViewChild尝试获取的元素在OnInit生命周期事件中不可用。你可以在AfterViewInit生命周期事件中获得该元素。

根据文档：

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

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

@ViewChild('nameAccessor') ngModel:NgModel;

ngOnInit(): void {

}

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

- Suren Srapyan

---

但是，如果我们创建一个示例，我们可以看到ViewChild在ngOnInit中设置https://stackblitz.com/edit/angular-3nkvgr?file=app%2Fapp.component.ts 这意味着如果ViewChild是静态查询，则我们可以在ngOnInit内获取其值。 - yurzui

有意思。那么文档对于 ngAfterViewInit 有什么说法？或许它不一定总是在 OnInit 中出现？ - Suren Srapyan

我觉得他们忘记更新了。这对于旧的视图编译器来说是正确的。 - yurzui

https://github.com/angular/angular/blob/931cf78057068a28831acd0638e349d80d5e2f16/packages/core/src/view/view.ts#L332-L336 创建节点期间填充静态内容 - yurzui

也许。谢谢您的评论。 - Suren Srapyan

Answer 3

在 ngOnInit 中，@ViewChild 还没有被设置。你应该使用 ngAfterViewInit。

- Mohamed Gara