@ViewChild 返回未定义 - Angular 2

Question

我正在尝试使用 @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返回未定义。 我该如何解决这个问题？

Answer 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.." />

“<!--” 不应该在那里

Answer 2

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

Answer 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.." />