Element-Suche nach Klassenname in Angular

Wir werden ElementRef vorstellen und wie man es verwendet, um Elemente nach Klassennamen in Angular zu finden.

Verwenden der ElementRef zum Suchen von Klassen nach Namen in Angular

ElementRef ist ein nativer DOM-Elementobjekt-Wrapper, der die Eigenschaft nativeElement enthält. Es enthält den Verweis auf das DOM-Element und verwendet es, um das DOM zu manipulieren.

Es wird mit ViewChild verwendet, um das HTML-Element aus der Komponentenklasse zu erhalten. Lassen Sie uns ein Beispiel durchgehen, um die Verwendung des ElementRef-Objekts zu verstehen.

Erstellen Sie eine neue Anwendung in Angular, indem Sie den folgenden Befehl verwenden.

# angular
ng new my-app

Wechseln Sie nach dem Erstellen der Anwendung mit diesem Befehl zum Verzeichnis der App.

# angular
cd my-app

Lassen Sie uns unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# angular
ng serve --open

Zuerst müssen wir ViewChild, ElementRef zusammen mit Component und AfterViewInit aus @angular/core in die Datei app.component.ts importieren.

Nachdem wir sie in unsere Klasse importiert haben, erstellen Sie einen privaten ElByClassName im constructor und eine ngAfterViewInit-Funktion, die das Element speichert, das wir durch den Klassennamen mit <HTMLElement> erhalten.

Sobald wir das gewünschte Element haben, können wir nun den Namen des Buttons mit innerHTML ändern. Unser Code in app.component.ts sieht wie folgt aus.

# angular
import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular';
constructor(private ElByClassName: ElementRef) {}
ngAfterViewInit() {
const btnElement = (<HTMLElement>this.ElByClassName.nativeElement).querySelector(
'.myButton'
);
btnElement.innerHTML = 'This is Button';
}
}

Wir müssen eine Schaltflächenvorlage in app.component.html mit der Klasse myButton erstellen.

# angular
<button class="myButton">My Button</button>

Ausgabe:

Mit diesen einfachen Schritten können wir jedes DOM-Element mit seiner ElementRef manipulieren.

Wenn wir das Element ersetzen wollen, anstatt nur den Namen des Buttons zu ändern, können wir outerHTML verwenden.

Schreiben Sie in ngAfterViewInit() den folgenden Code, um die Schaltfläche durch eine Überschrift zu ersetzen.

# Angular
btnElement.outerHTML = '<h1>This is Heading</h1>';

Ausgabe: