Angular2如何获得生成的HTML元素的参考动态
我有动态生成的这个输入: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}}
我想获得到在此基础上动态ID的DOM元素的引用。这个输入可以是3个,6个或更多的输入,所以我需要动态地访问这个id并获得它。
唯一的反应是
let elem:Element = document.getElementById("myProgrammaticallyChosenIndex")
需要
测试在角4+
您可以通过elementRef访问DOM。
注入它由
constructor(myElement: ElementRef) { ... }
而且由nativeElement财产
elementRef.nativeElement.select("#blabla")
'elementRef.nativeElement'没有'select'方法。 –
呃,为什么不''elementRef.nativeElement.querySelector()'?见https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector –
@vicgoyso寒气出来,并提供为什么你觉得这是不是一个很好的回答一个反例或解释。 querySelector响应就是很好的例子。 – dudewad
访问DOM元素会让你的构造函数有一个叫ElementRef class
类它给你的许可证直接访问到托管DOM的当前组件或指令。
您可以使用ElementRef.nativeElement
得到一个HTML元素,那么你就可以访问HTML元素的属性通过使用角2
例与ElementRef
和Renderer
提供jQuery
或Renderer
类,使您的修改:
@angular/core
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');
}
}
使用ElementRef
类来获取父元素,然后创建一个HTMLElement
,以获取其动态元素中,b y类名。
组件:
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
。
@Downvoter:照顾解释? –
除了这个问题从未提及过使用jQuery的事实之外,你不应该为你不推荐做的事情包含代码演示。 – wrldbt
@wrldbt:“*'quick demo' *” –
没有其他的角度怪异仪式什么是你想实现什么? – yurzui
@yurzui我需要在按下按钮时获得所有输入的值,问题在于它们可以在数量和内容上有所不同,例如它们可以是3输入或6输入或4或5 ...所以我需要一些生成动态ID并动态获取其内容的方法 – commonSenseCode
如果您可以访问DOM,是否足够? – quindimildev