घटक वर्ग से एक्सेस टेम्प्लेट संदर्भ चर

Question

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

क्या घटक वर्ग से टेम्पलेट एक्सेस चर को एक्सेस करना संभव है?

अर्थात, क्या मैं इसे यहाँ तक पहुँचा सकता हूँ,

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

Answer 1

इसके लिए एक उपयोग-मामला है @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......
   }
}

यहाँ एक कार्यशील डेमो है:

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

Comments

लेकिन डिबगिंग पर मुझे यह अपरिभाषित के रूप में ही मिल रहा है।

— जैकऑफऑल

जैसा कि मैंने उल्लेख किया है, इसकी एकमात्र उपलब्ध घटना के बाद ngAfterViewInit()निकाल दिया गया था। आपको ViewChild'@ कोणीय / कोर` ..

— mxii

लेकिन हम एक मूल्य कैसे निर्धारित कर सकते हैं? मैंने कोशिश की है this.ipt.nativeElement.setAttribute('value', 'xxx');लेकिन कुछ नहीं होता है। और वहाँ की तरह कोई तरीके हैं value()या setValue()यहां तक कि अगर मैं प्रकार HTMLInputElement (मैं आईडीई के कोड हिंट / स्वत: पूर्ण पर इस आधारित कर रहा हूँ) की यह घोषणा,। मेरे मामले में, मुझे मूल्य पढ़ने की परवाह नहीं है। मुझे बस अलग-अलग मूल्य निर्धारित करने की आवश्यकता है।

— MrCroft

वर्तमान में हॉलिडे में .. क्या आपने setPropertyभी कोशिश की ?

— mxii 19

नहीं करना चाहिए this.input.nativeElement.value = 'test'काम ?! शायद रूपों और उनके बाइंडिंग के साथ विशेष व्यवहार हैं।

— mxii