angular - @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返回未定义。我该如何解决这个问题？

标签： angulardomviewchild

Answer 1

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