Accedi alle variabili di riferimento del modello dalla classe del componente

108

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

È possibile accedere alla variabile di accesso al modello dalla classe del componente?

ad esempio, posso accedervi qui,

class XComponent{
   somefunction(){
       //Can I access #ipt here?
   }
}

angular typescript angular2-template

— jackOfAll
fonte

152

Questo è un caso d'uso per @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......
   }
}

Ecco una demo funzionante:

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

— MXII
fonte

Ma durante il debug ottengo this.input come undefined.

— jackOfAll

Come ho già detto, è disponibile solo DOPO che l'evento è ngAfterViewInit()stato licenziato. Devi importare ViewChildda "@ angular / core" ..

— mxii

Ma come possiamo impostare un valore? Ho provato this.ipt.nativeElement.setAttribute('value', 'xxx');ma non succede niente. E non ci sono metodi come value()o setValue(), anche se lo dichiaro di tipo HTMLInputElement (lo sto basando sul suggerimento / completamento automatico del codice IDE). Nel mio caso, non mi interessa leggere il valore. Devo solo impostare valori diversi.

— MrCroft

Attualmente in vacanza .. ci hai provato setPropertyanche tu ?

— mxii

non dovrebbe this.input.nativeElement.value = 'test'funzionare ?! forse ci sono comportamenti speciali con le forme e le loro associazioni.

— mxii