Angular2 Как получить ссылку на HTML-элементы, созданные динамически

У меня эти входы генерируются динамически:

  <div *ngFor="let cell of column; let i = index;">
          <!-- Material design input-->
          <md-input id="my-input-{{i}}">
          </md-input>
  </div>

Обратите внимание: id=my-input-{{i}} Я бы хотел получить ссылку на элемент DOM на основе этого динамического идентификатора. Этот вход может быть 3, 6 или более входов, поэтому мне нужно получить доступ к идентификатору динамически и получить удержание.

Ответ 1

Единственный ответ

let elem:Element = document.getElementById("myProgrammaticallyChosenIndex")

Никакой другой угловой странной церемонии не требовалось

Протестировано на угловом 4+

Ответ 2

Используйте класс ElementRef из @angular/core чтобы получить родительский элемент, а затем создайте HTMLElement чтобы получить его динамические элементы по имени класса.

Компонент:

declare var $: any; //intentional use of jQuery-not recommended though

@Component({
  selector: 'my-app',
  template: '
    <input type='button' (click)='addDiv()' value='Add New Div' />

    <input type='button' (click)='selectDiv()' value='Select' />
  '
})
export class App {
  constructor(private elRef: ElementRef) {
  }

  addDiv() {
    /*intentional use of jQuery for appending new div
     give a class to your dynamic elements*/

    $('my-app').append("<div class='foo'>Hello I'm Dynamic!</div>");
  }

  selectDiv() {
    //create a new HTMLElement from nativeElement
    var hElement: HTMLElement = this.elRef.nativeElement;

    //now you can simply get your elements with their class name
    var allDivs = hElement.getElementsByClassName('foo');

    //do something with selected elements
    console.log(allDivs);
  }
}

Рабочий плунжер

Изменить: я использовал jQuery только для быстрой демонстрационной цели. В противном случае вы не должны использовать jQuery с Angular.

Ответ 3

Вы можете получить доступ к DOM элементом element.

Внесите его, чтобы ваш конструктор

constructor(myElement: ElementRef) { ... }

И доступ к элементу DOM с помощью свойства nativeElement

elementRef.nativeElement.select("#blabla")

Ответ 4

Существует класс класса ElementRef

Это дает вашему разрешению прямой доступ к текущему компоненту или директивному размещению DOM.

Вы можете использовать ElementRef.nativeElement для получения элемента HTML, затем вы можете получить доступ к свойствам элемента html, чтобы внести изменения, используя класс jQuery или Renderer предоставленный Angular 2.

Пример с ElementRef и Renderer:

import { Directive, ElementRef, Input, Renderer } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef, renderer: Renderer) {
       renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
    }
}