Angular2: Каков наилучший способ получить ссылку на элемент шаблона

Скажем, у меня есть такой компонент в 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) Используя локальную шаблонную переменную

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