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

代码中有一些错误，请修复该错误，然后重试。

ChromeDriver driver = new ChromeDriver(Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location));

应该有一个结束标记-> [form] =“ group”>

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

在<!--<div class="row form-group2 required">之前删除“ <!--”，并用<div class="row form-group2 required">正确关闭

最后，声明输入类型</div>

type="text"

@ViewChild返回未定义-Angular 2

3 个答案: