Angular2如何获取动态生成的HTML元素的引用

Question

我有动态生成的输入：

  <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}}我想根据这个动态id获得对DOM元素的引用。此输入可以是3个，6个或更多输入，因此我需要动态访问id并保持它。

Answer 1

唯一的回应是

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

没有其他角度怪异的仪式需要

测试角4+

Answer 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);
  }
}

Working Plunker

编辑：我在这里仅使用jQuery进行快速演示。否则，你不应该使用jQuery和Angular。

Answer 3

您可以通过DOM访问elementRef。

通过构造函数注入它

constructor(myElement: ElementRef) { ... }

并通过DOM财产访问nativeElement元素

myElement.nativeElement.select("#blabla")

Answer 4

有一个叫做ElementRef class的课程

它允许您的许可直接访问托管DOM的当前组件或指令。

您可以使用ElementRef.nativeElement获取HTML元素，然后您可以使用Angular 2提供的jQuery或Renderer类来访问html元素属性以进行修改。

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');
    }
}