Доступ до змінних шаблонних шаблонів із класу компонентів


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

Чи можна отримати доступ до змінної доступу до шаблону з класу компонентів?

тобто чи можу я отримати доступ до нього тут,

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

Відповіді:


151

Це випадок використання для @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


Але під час налагодження я отримую this.input як невизначений.
jackOfAll

Як я вже згадував, його було доступно лише ПІСЛЯ події ngAfterViewInit(). Вам потрібно імпортувати ViewChildз '@ angular / core` ..
mxii

Але як ми можемо встановити значення? Я намагався, this.ipt.nativeElement.setAttribute('value', 'xxx');але нічого не відбувається. І немає ніяких методів , як value()або setValue(), навіть якщо я оголошую його типу HTMLInputElement (я обґрунтовуючи це середовища IDE коду натякаючи / автозаповнення). У моєму випадку мені байдуже читати значення. Мені просто потрібно встановити різні значення.
MrCroft

В даний час у відпустці ... Ви setPropertyтакож пробували ?
mxii

1
не повинен this.input.nativeElement.value = 'test'працювати ?! можливо, є спеціальні форми поведінки з формами та їх прив’язками.
mxii
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.