Uzyskaj dostęp do zmiennych odwołań do szablonu z klasy składnika

108

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

Czy jest możliwy dostęp do zmiennej dostępu do szablonu z klasy komponentów?

tzn. czy mogę uzyskać do niego dostęp tutaj,

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

angular typescript angular2-template

— jackOfAll
źródło

152

To jest przypadek użycia dla @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......
   }
}

Oto działające demo:

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

— mxii
źródło

Ale po debugowaniu otrzymuję ten wpis jako niezdefiniowany.

— jackOfAll

Jak wspomniałem, jest dostępny tylko PO ngAfterViewInit()odpaleniu zdarzenia . Musisz importować ViewChildz '@ angular / core` ..

— mxii

Ale jak możemy ustawić wartość? Próbowałem, this.ipt.nativeElement.setAttribute('value', 'xxx');ale nic się nie dzieje. I nie ma metod takich jak value()lub setValue(), nawet jeśli zadeklaruję to typu HTMLInputElement (opieram się na podpowiedziach do kodu / autouzupełnianiu IDE). W moim przypadku nie obchodzi mnie odczytywanie wartości. Muszę tylko ustawić różne wartości.

— MrCroft

Obecnie na wakacjach… próbowałeś setPropertyteż?

— mxii

nie powinno this.input.nativeElement.value = 'test'działać ?! być może istnieją specjalne zachowania z formami i ich powiązaniami.

— mxii