@ViewChild 返回未定义 - Angular 2答案

【问题标题】：@ViewChild returns undefined - Angular 2@ViewChild 返回未定义 - Angular 2
【发布时间】：2019-07-28 05:10:53
【问题描述】：

我正在尝试使用 @ViewChild 来获取我需要的 DOM 元素。我有以下描述我的问题的组件：

import {Component, ViewChild, ElementRef, OnInit, Input} from "@angular/core";


@Component({
  selector: 'some-comp',
  template: `

  <input
    #myInputOut
    type="text"
    class="google-place-input"
    placeholder="Type to search..">

   <span class="row form-group">
     <required-input
       class="col-12 has-danger"
       [label]="'somel:'"
       [controlName]="'somel'"
       [form]="group"
      </required-input>
    </span>

 <div class="row form-group2 required">
    <label class=" col-3 control-label" for="street">label:</label>
    <input #myInputIn class="col-7" id="someid" placeholder="Type to search.." /></div>
`
})
export class someClass implements OnInit{

  @ViewChild('myInputOut') myInputOut: ElementRef;
  @ViewChild('myInputIn') myInputIn: ElementRef;


  private element: HTMLInputElement;
  private element2: HTMLInputElement;

    constructor(  private databaseService : DatabaseService,
               private router : Router){

  }


  ngOnInit(){
    this.element = this.myInputOut.nativeElement;
    this.element2 = this.myInputIn.nativeElement;
  }
}

由于某种原因，myInputOut 返回正确，但 myInputIn 返回未定义。我该如何解决这个问题？

【问题讨论】：

尝试在<div class="row form-group2 required">之前删除评论打开<!--
你没有正确关闭required-input .. 尝试关闭它
@Andriy 这就是问题所在，谢谢。
请确保您在此处发布的代码格式正确且语法正确。

标签： angular dom viewchild

【解决方案1】：

看起来你正在评论输入或至少开始

 <!--  <div class="row form-group2 required">
    <label class=" col-3 control-label" for="street">label:</label>
    <input #myInputIn class="col-7" id="someid" placeholder="Type to search.." />

“

【解决方案2】：

您将只能在 ngAfterViewInit() 中访问 ViewChild 查询。它在 ngOnInit() 中不可用，因此您无法定义。

【讨论】：

> 在调用 ngAfterViewInit 回调之前设置视图查询。：angular.io/api/core/ViewChild

【解决方案3】：

代码中存在一些错误，请修复并重试。

<required-input
   class="col-12 has-danger"
   [label]="'somel:'"
   [controlName]="'somel'"
   [form]="group"

应该有一个结束标签 --> [form]="group" >

<!--<div class="row form-group2 required">

去掉<div class="row form-group2 required">前面的“<!--”，用</div>正确关闭

最后声明输入类型type="text"

<input #myInputIn type="text" class="col-7" id="someid" placeholder="Type to search.." />

【讨论】：