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

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

Ответ 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);
    }
  }

Это сообщение в блоге от Kara Erickson - это действительно хорошее чтение для ознакомления с подходом Angular к таким вещам.

Ответ 2

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

<div #myDiv></div>

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

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

   constructor() {}

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