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?
   }
}

angular typescript angular2-template

— jackOfAll
source

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
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

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