javascript / beginner
Snippet
Zugriff auf Elemente mit @ViewChild
Der @ViewChild-Dekorator ermöglicht es Ihnen, auf eine Kind-Komponente oder ein DOM-Element direkt aus Ihrer Komponentenklasse zuzugreifen, indem Sie eine Template-Referenzvariable verwenden.
snippet.js
javascript
1
2
3
4
5
6
7
8
@Component({ selector: 'app-root', template: '<input #myInput>' })export class AppComponent {@ViewChild('myInput') inputElement!: ElementRef;focusInput() {this.inputElement.nativeElement.focus();}}
angular
Erklärung
1
@ViewChild('myInput')
Sucht im Template nach der Referenz mit dem Namen 'myInput'.
2
inputElement!: ElementRef;
Deklariert eine Variable, um die Referenz auf das DOM-Element zu speichern.
3
this.inputElement.nativeElement
Greift auf das tatsächliche zugrunde liegende HTML-Element im Browser zu.