Variabel referensi template akses dari kelas komponen

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

Apakah mungkin untuk mengakses variabel akses template dari kelas komponen?

yaitu, dapatkah saya mengaksesnya di sini,

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

Jawaban:

152

Itu adalah kasus penggunaan untuk @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......
   }
}

Berikut demo yang berfungsi:

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

mxii
sumber
Tapi pada debugging saya mendapatkan this.input sendiri sebagai undefined.
jackOfAll
Seperti yang saya sebutkan, ini hanya tersedia SETELAH acara ngAfterViewInit()dipecat. Anda harus mengimpor ViewChilddari '@ angular / core` ..
mxii
Tapi bagaimana kita bisa menetapkan nilai? Saya sudah mencoba this.ipt.nativeElement.setAttribute('value', 'xxx');tetapi tidak ada yang terjadi. Dan tidak ada metode seperti value()atau setValue(), bahkan jika saya mendeklarasikannya dengan tipe HTMLInputElement (Saya mendasarkan ini pada kode IDE yang mengisyaratkan / pelengkapan otomatis). Dalam kasus saya, saya tidak peduli tentang membaca nilainya. Saya hanya perlu menetapkan nilai yang berbeda.
MrCroft
Saat ini di Holiday .. sudah coba setPropertyjuga?
mxii
1
seharusnya tidak this.input.nativeElement.value = 'test'bekerja ?! mungkin ada perilaku khusus dengan bentuk dan ikatannya.
mxii