jquery - 定位一个元素，其ID来自组件

我想在Angular4中实现类似的东西。

$('dataBlock').empty();

如何使用组件中的id访问dom元素？当我尝试以下操作时，我在说Cannot read property 'nativeElement' of undefined

<div id="dataBlock"></div>

组件.ts

@ViewChild('dataBlock') block: ElementRef;

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

最佳答案

您可以使用标准javascript方法通过其id获取元素：

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

但是，在角度上，引用元素的首选方法是使用template reference variable：

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

该变量还允许在@ViewChild的帮助下访问代码中的元素：

@ViewChild("dataBlock") block: ElementRef;

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