getElementById Ersetzung in Angular

1. getElementById-Ersetzung in Angular
2. ElementRef in Angular
3. Den Wert der Eingabe mit ElementRef in Angular ermitteln

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:

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:

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:

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: