javascript - example - Angular2: ¿Cuál es la mejor manera de obtener una referencia de un elemento de plantilla

javascript en angular 4

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo puedo seleccionar un elemento en una plantilla de componente? 10 respuestas

Digamos que tengo un componente como este en Angular 2.

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

¿Cómo puedo obtener una referencia a un elemento de una plantilla? Por ejemplo, ¿cómo obtengo una referencia a un <span> ?

Encontré dos enfoques hasta ahora:

1) Obtener una referencia usando ElementRef

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

2) Usando ViewChild

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

3) Usando variable de plantilla local

1) Lo que no me gusta de un primer enfoque es que necesito hacer la getElementsBy... like.

2) En cuanto al segundo, no sé cómo obtener acceso a un elemento HTML, solo puedo acceder a otro subcomponente. ¿Y si tengo más subcomponentes de un mismo tipo?

3) La variable de plantilla local solo funciona dentro de una plantilla, ¿verdad?

¿Cuál es la mejor manera de obtener una referencia a una plantilla en Angular 2? Me gustaría tener algo como React tiene 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

Puede usar @ViewChild(''varName'') con una variable de plantilla ( <tag #varName> ) para obtener un elemento específico cuando tenga más de uno del mismo tipo. Debería intentar evitar el acceso directo de todos modos, use enlaces si es posible.