Angular2:获取模板元素引用的最佳方法是什么

时间:2016-01-06 15:11:46

标签: javascript angular

假设我在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();

1 个答案:

答案 0 :(得分:36)

当您拥有多个相同类型的元素时,可以将@ViewChild('varName')与模板变量(<tag #varName>)一起使用来获取特定元素。 你应该尽量避免直接访问,如果可能的话,使用绑定。