getElementById-Ersetzung in Angular mit TypeScript
-
Die
document.getElementById()-Methode in TypeScript -
Verwendung von
ElementRefalsgetElementById-Ersatz in Angular mit TypeScript
Dieser Tutorial-Leitfaden erklärt kurz die Ersetzung document.getElementById in Angular mit TypeScript.
Hier finden Sie auch die besten Methoden zum getElementById in Angular mit Codebeispielen. Wir lernen auch den Zweck des DOM querySelector in TypeScript kennen.
Lassen Sie uns zunächst die Methode document.getElementById in TypeScript kennenlernen und warum sie in der Entwickler-Community beliebt ist.
Die document.getElementById()-Methode in TypeScript
Das document.getElementById() ist eine vordefinierte JavaScript- (wie auch TypeScript-) Methode, die für die Manipulation des document-Objekts zur Verfügung steht. Es gibt ein Element mit einem bestimmten Wert und null zurück, wenn das Element nicht existiert.
Das document.getElementById() ist eine der gebräuchlichsten und beliebtesten Methoden in der Entwicklergemeinschaft für das HTML-DOM.
Der einzige wichtige Punkt, den Sie beachten sollten, ist, dass, wenn zwei oder mehr Elemente dieselbe ID haben, document.getElementById() das erste Element zurückgibt.
Sehen wir uns nun einige der Codierungsbeispiele an, um ihren Zweck und ihre Verwendung besser zu verstehen.
Betrachten Sie das h1-Tag mit etwas Text mit einer eindeutigen demo-ID. Wenn wir nun im Abschnitt scripts auf dieses bestimmte Tag abzielen möchten, verwenden wir die Methode getElementById(), die im Objekt document verfügbar ist.
<!DOCTYPE html>
<html>
<body>
<h1 id="demo">The Document Object</h1>
<h2>The getElementById() Method</h2>
<script>
document.getElementById("demo").style.color = "red";
</script>
</body>
</html>
Ausgabe:
Betrachten wir nun ein weiteres dynamisches Beispiel: Ein Eingabefeld nimmt eine Zahl und gibt ihren Würfelwert zurück.
<!DOCTYPE html>
<html>
<body>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
<script>
function getcube(){
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
</body>
</html>
Ausgabe:
Sehen wir uns nun die Ersetzung getElementById in Angular mit TypeScript an.
Verwendung von ElementRef als getElementById-Ersatz in Angular mit TypeScript
Die ElementRef von AngularJs ist ein Wrapper um ein HTML-Element, der die Eigenschaft nativeElement enthält und die Referenz auf das zugrunde liegende DOM-Objekt hält. Mit ElementRef können wir das DOM in AngularJs mit TypeScript manipulieren.
Durch die Verwendung von ViewChild erhalten wir die ElementRef eines HTML-Elements innerhalb der Komponentenklasse. Angular ermöglicht das Einfügen von ElementRef des Direktivenelements der Komponente, wenn es im Konstruktor angefordert wird.
Mit dem Decorator @ViewChild verwenden wir die Schnittstelle ElementRef innerhalb der Klasse, um die Elementreferenz zu erhalten.
Betrachten Sie das folgende Codebeispiel in AngularJs in der Datei main.component.html. Wir haben eine Schaltfläche mit einem Ereignis und einem Div mit einer eindeutigen ID myName:
# angular
<div #myName></div>
<button (click)="getData()">Get Value</button>
Ausgabe:
Beispiel 1 (app.component.ts):
#angular
import { Component, VERSION, ViewChild, ElementRef } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./main.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular " + VERSION.major;
@ViewChild("myName") myName: ElementRef;
getData() {
console.log(this.myName);
this.myName.nativeElement.innerHTML = "I am changed by ElementRef & ViewChild";
}
}
Ausgabe:
Mit dem Decorator @ViewChild erhalten wir die Referenz der Eingabe mit Hilfe der Schnittstelle ElementRef innerhalb der Klasse. Mit dieser Referenz ändern wir dann seinen Wert mit der Funktion getData().
Beispiel 2 (app.component.ts):
import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
name = "Angular";
@ViewChild("ipt", { static: true }) input: ElementRef;
ngAfterViewInit() {
console.log(this.input.nativeElement.value);
}
onClick() {
this.input.nativeElement.value = "test!";
}
}
Ausgabe:
Dieser erhält die Referenz des Eingabefeldes und ändert seinen Innentext beim Klick auf die Schaltfläche.
Ibrahim is a Full Stack developer working as a Software Engineer in a reputable international organization. He has work experience in technologies stack like MERN and Spring Boot. He is an enthusiastic JavaScript lover who loves to provide and share research-based solutions to problems. He loves problem-solving and loves to write solutions of those problems with implemented solutions.
LinkedIn