This question already has answers here:
How can I select an element in a component template?
(13个回答)
4年前关闭。
假设我在Angular 2中有一个类似的组件。
如何从模板中获取对元素的引用?例如,如何获得对
到目前为止,我发现了两种方法:
1)使用ElementRef获取引用
2)使用ViewChild
3)使用local template variable
1)我不喜欢第一种方法是需要执行类似
2)关于第二个,我不知道如何访问HTML元素,我只能访问另一个子组件。如果我有更多相同类型的子组件怎么办?
3)本地模板变量仅在模板内有效,对吗?
在Angular 2中获得对模板的引用的最佳方法是什么?
我想要类似React的东西
https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute
(13个回答)
4年前关闭。
假设我在Angular 2中有一个类似的组件。
@Component ({
directives: [Timeline, VideoPlayer],
template: `<div>
<span id="myId"></span>
<videoplayer [mode]="mode"></videoplayer>
<timeline [mode]="mode"></timeline>
</div>`,
})
export class VideoEditor {
}
如何从模板中获取对元素的引用?例如,如何获得对
<span>
的引用?到目前为止,我发现了两种方法:
1)使用ElementRef获取引用
export class VideoEditor {
constructor (private el: ElementRef) {
el.nativeElement.getElementsBy.....;
}
}
2)使用ViewChild
export class VideoEditor {
@ViewChild(Timeline) timeline: Timeline;
ngAfterViewInit () {
this.timeline;
}
}
3)使用local template variable
1)我不喜欢第一种方法是需要执行类似
getElementsBy...
的功能。2)关于第二个,我不知道如何访问HTML元素,我只能访问另一个子组件。如果我有更多相同类型的子组件怎么办?
3)本地模板变量仅在模板内有效,对吗?
在Angular 2中获得对模板的引用的最佳方法是什么?
我想要类似React的东西
https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute
<input ref="myInput" />
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
最佳答案
当您有多个相同类型的模板时,可以将@ViewChild('varName')
与模板变量(<tag #varName>
)结合使用来获取特定元素。
无论如何,您都应尽量避免直接访问,请尽可能使用绑定(bind)。
关于javascript - Angular2 : What is the best way to get a reference of a template element [duplicate],我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34636435/