Question

我无法理解为什么ViewChild在相同的确切代码适用于textarea元素时返回null，但它不适用于div

模板：

<div #refId class = 'line_counter' >
    {{lineNumber}}
</div>

组件：

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

@Component({
  selector: 'app-line-counter',
  templateUrl: './line-counter.component.html',
  styleUrls: ['./line-counter.component.css']
})
export class LineCounterComponent implements OnInit {

  @ViewChild('#refId') textDiv:ElementRef;

  @Input() lineNumber : number = 0;

  constructor() {
  }

  ngOnInit() {
    if(Globals.refLineCounter == null) {
      Globals.refLineCounter = this;
      //console.log(Globals.refLineCounter.getHeight());
      console.log(this.getHeight());
    }
  }

  getHeight(){
    return this.textDiv.nativeElement.height;
  }
}

Answer 1

代码中的两个错误 - 首先从#删除ViewChild，您不需要它：

@ViewChild('refId') textDiv:ElementRef;

其次，ViewChild变量未在AfterViewInit生命周期之前初始化，因此您需要将代码从ngOnInit移至ngAfterViewInit：

ngAfterViewInit() {
    if(Globals.refLineCounter == null) {
      Globals.refLineCounter = this;
      //console.log(Globals.refLineCounter.getHeight());
      console.log(this.getHeight());
    }
}

Answer 2

可以在ngAfterViewInit事件触发后引用ViewChild（en）。您需要从AfterViewInit实现接口@angular/core。
您需要使用CSS选择器，或者如果您使用哈希符号，则可以使用模板中提供的名称，但在@ViewChild属性中没有哈希值的情况下引用它。

另请参阅https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html了解其他生命周期挂钩详细信息。

以下是您的代码中的必要内容（我删除了OnInit，因为此类组件中似乎不再需要）。

import {Component, Input, ElementRef, ViewChild, AfterViewInit} from '@angular/core';

export class LineCounterComponent implements AfterViewInit {
    @ViewChild('refId') textDiv:ElementRef;

    ngAfterViewInit() {
      if(Globals.refLineCounter == null) {
        Globals.refLineCounter = this;
        //console.log(Globals.refLineCounter.getHeight());
        console.log(this.getHeight());
      }
    }   
}

angular 2 ViewChild不起作用

2 个答案: