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

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

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

Никакая другая угловатая странная церемония не нужна

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

Используйте класс 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.

Если у вас есть несколько селекторов, вы можете использовать @ViewChildren. // HTML

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

// TS-файл

@ViewChildren('inputBinding') inputBinding: QueryList<ComponentName>;

ngAfterViewInit(){
 console.log(this.inputBinding.toArray());
}

Существует класс с именем класс 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');
    }
}

Вы можете получить доступ к DOM через elementRef.

Вставьте его через свой конструктор с помощью

constructor(myElement: ElementRef) { ... }

И получить доступ к элементу DOM по свойству nativeElement

myElement.nativeElement.select("#blabla")