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

您可以通过elementRef访问DOM。

通过

通过你的构造函数注入它

constructor(myElement: ElementRef) { ... }

并通过 nativeElement 属性

访问 DOM 元素

myElement.nativeElement.select("#blabla")

Answer 2

有一个class叫ElementRef class

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

您可以使用 ElementRef.nativeElement 获取 HTML 元素，然后您可以使用 jQuery 或 [=17 访问 html 元素属性进行修改=] class 由 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');
    }
}

Answer 3

使用 ElementRef class 从 @angular/core 获取父元素，然后创建一个 HTMLElement 通过 class 名称获取其动态元素。

分量：

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 4

唯一的回应是

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

不需要其他angular奇怪的仪式

测试于 angular 4+

Answer 5

如果你有多个选择器，你可以使用@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());
}

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

Angular2 How to get reference of HTML elements generated dynamically

angular2-directives

angular2-template

angular