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 или более входов, поэтому мне нужно получить доступ к id динамически и получить его.

20
angular angular2-directives angular2-template

4 ответов

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

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

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

Испытано на угловом 4+

21

использовать 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);
  }
}

Рабочая Plunker

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

3

вы можете получить доступ к DOM с помощью elementRef.

Inject IT бросьте свой конструктор по

constructor(myElement: ElementRef) { ... }

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

elementRef.nativeElement.select("#blabla")
0

есть класс под названием класс 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');
    }
}
0