jquery - 使用组件中的 id 定位一个元素

Question

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

$('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();
}

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 = "";
}