getElementById Ersetzung in Angular

Rana Hasnain Khan 15 Februar 2024
  1. getElementById-Ersetzung in Angular
  2. ElementRef in Angular
  3. Den Wert der Eingabe mit ElementRef in Angular ermitteln
getElementById Ersetzung in Angular

Wir werden den Ersatz der Funktion getElementById in Angular einführen.

Wir werden auch die Funktion ElementRef in Angular einführen, um die Elementreferenz und den Wert des Dokuments aus der Eingabe zu erhalten.

getElementById-Ersetzung in Angular

Die Methode getElementById gibt das Element mit dem ID-Attribut mit dem angegebenen Wert zurück. Diese Methode ist am gebräuchlichsten in HTML DOM und wird fast jedes Mal verwendet, wenn wir unser Dokument manipulieren, Informationen daraus abrufen oder Elemente darin enthalten.

Da getElementById eine vanilla Javascript-Funktion ist und wir Typescript in Angular verwenden, ist der Ersatz für diese Funktion in Typescript ElementRef, das wir in diesem Tutorial vorstellen werden.

ElementRef in Angular

Die ElementRef ist eine Klasse, die ein bestimmtes DOM-Element umschließen kann, um die Methoden und Eigenschaften eines nativen Elements zu verbessern. Wenn wir ein Element als ElementRef definieren, können wir darauf als nativeElement-Objekt zugreifen.

Dieser Artikel ist mit Angular 4 bis Angular 12 kompatibel.

Lassen Sie uns ElementRef Interface in einer Klasse mit dem Decorator @ViewChild verwenden, um die Elementreferenz zu erhalten.

Zuerst bearbeiten wir unsere Vorlage app.component.html und fügen ihr den folgenden Code hinzu.

# angular

<div #myNameElem></div>

<button (click)="getValue()">Get Value</button>

Ausgabe:

1. Beispiel für ElementRef in Angular

In der Datei app.component.ts fügen wir Folgendes hinzu.

#angular
import { Component, VERSION, ViewChild, ElementRef } from "@angular/core";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})

export class AppComponent {
  name = "Angular " + VERSION.major;
  @ViewChild("myNameElem") myNameElem: ElementRef;
  getValue() {
    console.log(this.myNameElem);
    this.myNameElem.nativeElement.innerHTML = "I am changed by ElementRef & ViewChild";
  }
}

Ausgabe:

ElementRef in Angular

Den Wert der Eingabe mit ElementRef in Angular ermitteln

Nun werden wir vorstellen, wie man den Wert einer Eingabe mit ElementRef in Angular erhält.

Zuerst bearbeiten wir unsere Vorlage app.component.html und fügen ihr den folgenden Code hinzu.

# angular
<input type="text" name="name" #myNameElem />
<button (click)="getValue()">Get Value</button>
<button (click)="resetValue()">Reset</button>

Ausgabe:

zweites Beispiel für ElementRef in Angular

Nun fügen wir in der Datei app.component.ts Folgendes hinzu.

#angular
import { Component, VERSION, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  @ViewChild('myNameElem') myNameElem: ElementRef;
  getValue() {
    console.log(this.myNameElem.nativeElement.value);
  }
  resetValue() {
    this.myNameElem.nativeElement.value = '';
  }
}

Ausgabe:

Beispiel für ElementRef in Angular

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

Verwandter Artikel - Angular Function