Jquery 将id来自组件的元素作为目标

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

$('dataBlock').empty();

如何从组件访问id为的DOM元素？当我尝试以下操作时，我得到一个错误，即

无法读取未定义的属性“nativeElement”

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

---

您可以使用标准Javascript方法通过元素的

id

获取元素：

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

---

然而，在角度上，引用元素的首选方式是：

---

使用

#dataBlock

而不是

id=“dataBlock”

。如果需要使用

id

，请尝试

document.getElementById（“dataBlock”）.empty（）

。好的，当我尝试这两种方法时，会出现以下错误：此。block.nativeElement.empty不是函数，类型“HTMLElement”上不存在属性“empty”。请尝试使用

.innerHTML=”“

而不是

.empty（）

。是的，这非常有效。但即使我使用$（'datablock'）.empty（）；在组件中，它运行良好。为什么我们不考虑使用jQuery选择器直接工作，但这不是用角度做事情的方式。您不应该使用

id

或jQuery访问元素，而应该使用。文档的第三部分显示了如何在角度模板中工作。

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

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

@ViewChild("dataBlock") block: ElementRef;

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