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

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

Answer 5

有一个名为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');
    }
}

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

5 个答案: