Angular viewChild获取由*ngIf =“异步变量”嵌套的DOM元素[重复]答案

【问题标题】：Angular viewChild get DOMelement nested by *ngIf="asynchronous variable" [duplicate]Angular viewChild获取由*ngIf =“异步变量”嵌套的DOM元素[重复]
【发布时间】：2021-03-11 16:47:15
【问题描述】：

我正在尝试在 Angular 中获取 DOM 元素，控制台抛出错误：core.js:5882 错误类型错误：无法读取未定义的属性“nativeElement”。如果我转到另一条路线然后返回，我可以在控制台中看到正确的元素，但是如果我在第一次加载页面时抛出错误，我该如何解决这个问题？我试图获取的元素由一个带有 *ngIf 的 div 嵌套，该 div 评估一个异步变量。提前致谢

@ViewChild('inputSearch') el: ElementRef;

ngAfterViewInit(){
   console.log(this.el.nativeElement);
}

<div *ngIf="asynchronous variable">
   <input type="text" #inputSearch >
</div>

【问题讨论】：

您确定您发布的这段代码是您想问的吗？我尝试了最小的角度项目，它似乎工作得很好。 stackblitz.com/edit/…
我的猜测是您的条件<div *ngIf="true"> 在您的应用程序中有所不同，因此您的input 可能在调用ngAfterViewInit 时未呈现。
在我的代码中 *ngIf 评估一个异步值
因此，您的输入有 99% 的可能性尚未呈现。你应该更新你的问题:)

标签： javascript angular

【解决方案1】：

content is checked之后可以查看。

ngAfterContentChecked() {
    console.log(this.el.navtiveElement);
}

// Don't forget to implement the Interface in your component.
class SomeComponenet implements OnInit, AfterContentChecked {
    ...
}

【讨论】：