Угловой 2: доступ к элементу из компонента, getDocumentById не работает

Question

У меня есть компонент Angular 2, где я хочу получить элемент div <div id ="myId"> по его идентификатору. Я пытаюсь сделать: document.getElementById("myId") в моем компоненте (TypeScript), но я получаю ошибку: "не могу найти имя документа". Я вижу, что в других постах мы можем сделать что-то подобное, используя @ViewChild, однако я не понимаю, как мы можем использовать это с div, есть идеи?

Answer 1

Вы можете использовать @ViewChild с div, добавив TemplateRef.

шаблон

    <div id ="myId" #myId>

Составная часть

  import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements AfterViewInit {
    @ViewChild('myId') myId: ElementRef;

    constructor() {
    }

    ngAfterViewInit() {
      console.log(this.myId.nativeElement);
    }
  }

Этот пост в блоге Кары Эриксон очень хорош для ознакомления с подходом Angular к таким вещам.

Answer 2

Добавьте переменную Template Reference к элементу, к которому вам нужен доступ:

<div #myDiv></div>

И в компоненте:

class MyComponent implements AfterViewInit {
   @ViewChild('myDiv') myDiv: ElementRef;

   constructor() {}

   ngAfterViewInit() {
      console.log(this.myDiv);
   }
}