Acceder a las variables de referencia de la plantilla desde la clase de componente

108 
<div>
   <input #ipt type="text"/>
</div>

¿Es posible acceder a la variable de acceso a la plantilla desde la clase de componente?

es decir, ¿puedo acceder a él aquí?

class XComponent{
   somefunction(){
       //Can I access #ipt here?
   }
}
angular typescript angular2-template jackOfAll
fuente

Respuestas:

152

Ese es un caso de uso para @ViewChild:

https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

class XComponent {
   @ViewChild('ipt', { static: true }) input: ElementRef;

   ngAfterViewInit() {
      // this.input is NOW valid !!
   }

   somefunction() {
       this.input.nativeElement......
   }
}

Aquí hay una demostración funcional:

https://stackblitz.com/edit/angular-viewchilddemo?file=src%2Fapp%2Fapp.component.ts

mxii
fuente
Pero al depurar, obtengo this.input en sí mismo como indefinido.
jackOfAll
Como mencioné, solo está disponible DESPUÉS de que ngAfterViewInit()se disparó el evento . Tienes que importar ViewChilddesde '@ angular / core` ..
mxii
Pero, ¿cómo podemos establecer un valor? Lo he intentado this.ipt.nativeElement.setAttribute('value', 'xxx');pero no pasa nada. Y no hay métodos como value()o setValue(), incluso si lo declaro de tipo HTMLInputElement (baso esto en el código de sugerencia / autocompletar del IDE). En mi caso, no me importa leer el valor. Solo necesito establecer diferentes valores.
MrCroft
Actualmente en vacaciones ... ¿lo probaste setPropertytambién?
mxii
1
¡¿No debería this.input.nativeElement.value = 'test'funcionar ?! tal vez haya comportamientos especiales con las formas y sus vinculaciones.
mxii