Acessar variáveis ​​de referência de modelo da classe de componente

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

É possível acessar a variável de acesso do modelo da classe do componente?

ou seja, posso acessá-lo aqui,

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

Respostas:

152

Esse é um 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......
   }
}

Aqui está uma demonstração de trabalho:

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

mxii
fonte
Mas na depuração, estou obtendo this.input-se como indefinido.
jackOfAll
Como mencionei, ele só estará disponível DEPOIS do evento ngAfterViewInit()ser disparado. Você precisa importar ViewChildde '@ angular / core` ..
mxii
Mas como podemos definir um valor? Já tentei, this.ipt.nativeElement.setAttribute('value', 'xxx');mas nada acontece. E não existem métodos como value()ou setValue(), mesmo que eu o declare do tipo HTMLInputElement (estou baseando isso na sugestão de código / autocomplete do IDE). No meu caso, não me importo em ler o valor. Eu só preciso definir valores diferentes.
MrCroft de
Atualmente em férias .. você setPropertytambém tentou ?
mxii de
1
não deveria this.input.nativeElement.value = 'test'funcionar ?! talvez haja comportamentos especiais com formulários e suas ligações.
mxii