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

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

¡¿No debería this.input.nativeElement.value = 'test'funcionar ?! tal vez haya comportamientos especiales con las formas y sus vinculaciones.

— mxii