This question already has answers here:
How can I select an element in a component template?

(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/

10-10 18:40
查看更多