Доступ к ссылочным переменным шаблона из класса компонента

109

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

Можно ли получить доступ к переменной доступа к шаблону из класса компонента?

т.е. могу ли я получить к нему доступ здесь,

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

angular typescript angular2-template

— jackOfAll
источник

153

Это вариант использования @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

— mxii
источник

Но при отладке я получаю this.input как undefined.

— jackOfAll

Как я уже упоминал, он доступен только ПОСЛЕ того, как событие ngAfterViewInit()было запущено. Вы должны импортировать ViewChildиз '@ angular / core` ..

— mxii

Но как мы можем установить значение? Я пробовал, this.ipt.nativeElement.setAttribute('value', 'xxx');но ничего не получается. И нет таких методов, как value()или setValue(), даже если я объявлю его типом HTMLInputElement (я основываю это на подсказках / автозаполнении кода IDE). В моем случае меня не волнует чтение значения. Мне просто нужно установить разные значения.

— MrCroft

В настоящее время в отпуске .. вы setPropertyтоже пробовали ?

— mxii

не должно this.input.nativeElement.value = 'test'работать ?! возможно, есть особые особенности поведения с формами и их привязками.

— mxii