Website-Suche

angular - Zugriff auf Template-Referenzvariablen aus der Komponentenklasse

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

Ist es möglich, von der Komponentenklasse auf die Template-Zugriffsvariable zuzugreifen?

d.h., kann ich hier darauf zugreifen,

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

Antwort #1

Das ist ein Anwendungsfall für @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......
   }
}

Hier ist eine funktionierende Demo:

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

Demo mit Angular v18 aktualisieren:

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

was auch die neue Signalweise bei der Verwendung von ViewChildren berücksichtigt: https://angular.dev/api/core/viewChild?tab=usage-notes

Antwort #2

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

Manchmal funktioniert es beim Modal nicht. Also, als ich Modal in Angular verwendet habe, gab es einen Fehler, deshalb benutze ich dies.

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

Es wird auf jeden Fall funktionieren, wenn Sie möchten, dass das Modal ausgeführt wird, ohne den Button zu klicken.

Verwandte Artikel