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

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
1
не должно this.input.nativeElement.value = 'test'работать ?! возможно, есть особые особенности поведения с формами и их привязками.
mxii