Angular2: Qual è il modo migliore per ottenere un riferimento di un elemento di modello

Question

Diciamo che ho un componente come questo in angolare 2.

@Component ({ 
    directives: [Timeline, VideoPlayer], 
    template: `<div> 
    <span id="myId"></span> 
    <videoplayer [mode]="mode"></videoplayer> 
    <timeline [mode]="mode"></timeline> 
    </div>`, 
}) 
export class VideoEditor { 
} 

Come posso ottenere un riferimento a un elemento da un modello? Ad esempio, come posso ottenere un riferimento a <span>?

ho trovato due approcci finora:

1) Ottenere un riferimento utilizzando ElementRef

export class VideoEditor {  
    constructor (private el: ElementRef) { 
    el.nativeElement.getElementsBy.....; 
    } 
} 

2) Utilizzando ViewChild

export class VideoEditor { 
    @ViewChild(Timeline) timeline: Timeline; 
    ngAfterViewInit() { 
    this.timeline; 
    } 
} 

3) Utilizzando local template variable

---

1) Quello che non mi piace di un primo approccio è che devo fare la funzione-getElementsBy... -like.

2) Riguardo a un secondo, non so come ottenere un accesso a un elemento HTML, posso solo accedere a un altro sottocomponente. E se avessi più sottocomponenti di uno stesso tipo?

3) La variabile del modello locale funziona solo all'interno di un modello, vero?

Qual è il modo migliore per ottenere un riferimento a un modello in Angular 2? Mi piacerebbe avere qualcosa di simile Reagire ha 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(); 

Answer 1

È possibile utilizzare @ViewChild('varName') con una variabile di modello (<tag #varName>) per ottenere un elemento specifico quando si dispone di più di uno dei stesso tipo. Dovresti cercare di evitare comunque l'accesso diretto, se possibile usa i binding.