使用组件中的id定位元素

Question

我想在角度4中实现类似的东西。

Cannot read property 'nativeElement' of undefined

如何使用组件中的id访问DOM元素？当我尝试以下操作时，我收到错误<div id="dataBlock"></div>

@ViewChild('dataBlock') block: ElementRef;

getGraphdata(){
    **code to get data and implement a graph**
    this.dataBlock.nativeElement.empty();
}

component.ts

Thread.Sleep(500)

Answer 1

您可以使用标准Javascript方法通过id：

获取元素

document.getElementById("dataBlock").innerHTML = "";

在Angular中，引用元素的首选方法是使用template reference variable：

<div #dataBlock></div>
<button (click)="dataBlock.innerHTML = ''">Clear content</button>

该变量还允许在@ViewChild：

的帮助下访问代码中的元素

@ViewChild("dataBlock") block: ElementRef;

clearContent() {
  this.block.nativeElement.innerHTML = "";
}