angular - Şablon referans değişkenlerine bileşen sınıfından erişim

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

Şablon erişim değişkenine bileşen sınıfından erişmek mümkün mü?

yani, buradan ona erişebilir miyim,

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

Cevap #1

Bu, @ViewChild için bir kullanım örneğidir:

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......
   }
}

İşte çalışan bir demo:

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

Angular v18 kullanarak demo güncelleme:

https://stackblitz.com/edit/angular-v18-viewchild?file=src%2Fmain.ts

ve ayrıca ViewChildren kullanmanın yeni sinyal yolunu da dikkate alır: https://angular.dev/api/core/viewChild?tab=usage-notes

Cevap #2

@ViewChild('modal reference variable', { static: true }) name: ElementRef;

Bazen modal üzerinde çalışmıyor. Bu yüzden Angular'da modal kullandığımda hata veriyor, bu yüzden bunu kullanıyorum.

@ViewChild('modal reference variable', { static: true }) name!: ElementRef;

Butona tıklamadan modalın çalışmasını istiyorsanız, bu kesinlikle işe yarayacaktır.

İlgili makaleler