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

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

sollte nicht this.input.nativeElement.value = 'test'funktionieren ?! Vielleicht gibt es spezielle Verhaltensweisen mit Formen und ihren Bindungen.

— mxii