Bileşen sınıfından şablon referans değişkenlerine erişin

109

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

Şablon erişim değişkenine bileşen sınıfından erişmek mümkün mü?

yani, buradan erişebilir miyim,

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

angular typescript angular2-template

— jackOfAll
kaynak

154

Bu bir kullanım durumudur @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......
   }
}

İşte çalışan bir demo:

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

— mxii
kaynak

Ama hata ayıklamada bunu alıyorum. Kendini tanımsız olarak girdi.

— jackOfAll

Bahsettiğim gibi, yalnızca olay ngAfterViewInit()ateşlendikten SONRA kullanılabilir . ViewChild"@ Angular / core" dan içe aktarmanız gerekiyor ..

— mxii

Ama nasıl bir değer belirleyebiliriz? Denedim this.ipt.nativeElement.setAttribute('value', 'xxx');ama hiçbir şey olmadı. Ve value()ya gibi yöntemler yok setValue(), HTMLInputElement türü olarak bildirsem bile (bunu IDE'nin kod ipucu / otomatik tamamlamasına dayandırıyorum). Benim durumumda, değeri okumak umurumda değil. Sadece farklı değerler belirlemem gerekiyor.

— MrCroft

Şu anda Tatilde .. siz de denediniz setPropertymi?

— mxii

olmamalı this.input.nativeElement.value = 'test'çalışma ?! belki de formlar ve bağları olan özel davranışlar vardır.

— mxii