Accéder aux variables de référence de modèle à partir de la classe de composant

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

Est-il possible d'accéder à la variable d'accès au modèle à partir de la classe de composant?

c'est-à-dire, puis-je y accéder ici,

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

Réponses:

152

C'est un cas d'utilisation pour @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......
   }
}

Voici une démo fonctionnelle:

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

mxii
la source
Mais lors du débogage, j'obtiens this.input lui-même comme non défini.
jackOfAll
Comme je l'ai mentionné, il n'est disponible qu'après l'événement a ngAfterViewInit()été déclenché. Vous devez importer ViewChildde '@ angular / core` ..
mxii
Mais comment fixer une valeur? J'ai essayé this.ipt.nativeElement.setAttribute('value', 'xxx');mais rien ne se passe. Et il n'y a pas de méthodes comme value()ou setValue(), même si je le déclare de type HTMLInputElement (je me base sur l'indication de code / la saisie semi-automatique de l'IDE). Dans mon cas, je me fiche de lire la valeur. J'ai juste besoin de définir des valeurs différentes.
MrCroft
Actuellement en vacances ... avez-vous essayé setPropertyaussi?
mxii
1
ne devrait pas this.input.nativeElement.value = 'test'fonctionner?! peut-être y a-t-il des comportements spéciaux avec des formes et leurs liaisons.
mxii