Таргетинг на элемент с его идентификатором из компонента

Question

Я хотел бы реализовать что-то похожее на это в angular 4.

$('dataBlock').empty();

Как мне получить доступ к элементу DOM с его идентификатором из компонента?При попытке выполнить следующее я получаю сообщение об ошибке: Cannot read property 'nativeElement' of undefined

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

component.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 предпочтительным способом ссылки на элемент является ссылочная переменная шаблона :

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

Эта переменная также позволяет получить доступ к элементу в коде с помощьюиз @ViewChild:

@ViewChild("dataBlock") block: ElementRef;

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