Zugriff auf Vorlagenreferenzvariablen aus der Komponentenklasse

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

Ist es möglich, über die Komponentenklasse auf die Vorlagenzugriffsvariable zuzugreifen?

dh kann ich hier darauf zugreifen,

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

Antworten:

150

Das ist ein Anwendungsfall für @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......
   }
}

Hier ist eine funktionierende Demo:

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

mxii
quelle
Aber beim Debuggen bekomme ich this.input selbst als undefiniert.
JackOfAll
Wie ich bereits erwähnte, ist es nur verfügbar, nachdem das Ereignis ngAfterViewInit()ausgelöst wurde. Sie müssen ViewChildaus '@ angle / core` importieren ..
mxii
Aber wie können wir einen Wert setzen? Ich habe es versucht, this.ipt.nativeElement.setAttribute('value', 'xxx');aber nichts passiert. Und es gibt keine Methoden wie value()oder setValue(), auch wenn ich sie vom Typ HTMLInputElement deklariere (ich stütze mich dabei auf den Code-Hinweis / die automatische Vervollständigung von IDE). In meinem Fall ist es mir egal, den Wert zu lesen. Ich muss nur verschiedene Werte einstellen.
MrCroft
Derzeit im Urlaub .. hast du es setPropertyauch versucht ?
mxii
1
sollte nicht this.input.nativeElement.value = 'test'funktionieren ?! Vielleicht gibt es spezielle Verhaltensweisen mit Formen und ihren Bindungen.
mxii