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

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


angular dom angular2-template angular2-components
person joeCarpenter    schedule 04.03.2017    source источник
comment
Можете ли вы показать свой код   -  person Gab    schedule 04.03.2017

Ответы (2)


arrow_upward
68
arrow_downward

Вы можете использовать @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 Эриксон — действительно хорошая книга для знакомства с подходом Angular к подобным вещам.

person JayChase    schedule 04.03.2017
comment
Что, если id генерируется динамически в *ngFor для каждого элемента? - person Marcin Kapusta; 14.05.2018
comment
используя свойство index, вы можете добавить индексированную ссылочную переменную шаблона к элементам, созданным с помощью *ngFor - person user2713706; 25.06.2018
comment
но тогда вам также придется динамически генерировать аннотации @ViewChild(...), что невозможно. Что делать, если вы не знаете длину списка *ngFor? - person Adam Bajger; 14.12.2018

arrow_upward
14
arrow_downward

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

<div #myDiv></div>

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

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

   constructor() {}

   ngAfterViewInit() {
      console.log(this.myDiv);
   }
}
person seidme    schedule 04.03.2017
comment
Что, если id генерируется динамически? - person Marcin Kapusta; 14.05.2018
comment
@MarcinKapusta использовать идентификаторы не рекомендуется, поскольку на такой платформе, как angular, трудно избежать конфликтов имен (если у вас много компонентов). В каком случае id будет генерироваться динамически? Все идентификаторы должны быть уникальными и ожидаемыми. - person Shachar Har-Shuv; 16.01.2019