ElementRef in Angular

Wir stellen vor, was ElementRef ist und wie man es in Angular verwendet.

Verwenden Sie ElementRef, um das DOM-Element in Angular zu erhalten

ElemenRef ist ein Wrapper um ein natives DOM-Elementobjekt, das die Eigenschaft nativeElement enthält. Es enthält den Verweis auf das DOM-Element, und wir können es verwenden, 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 ElementRef im Detail zu verstehen und zu wissen, wie es in unserer Anwendung verwendet wird.

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

Nachdem wir sie importiert haben, erstellen wir in unserer Klasse ein ElementRefDiv mit ViewChild. Und wir werden eine ngAfterViewInit-Funktion erstellen, die den Wert an unser div weitergibt.

Unser Code in app.component.ts sieht also wie folgt aus.

# angular
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 {
  @ViewChild('ElementRefDiv') ElementView: ElementRef;

  ngAfterViewInit() {
    console.log(this.ElementView);
    this.ElementView.nativeElement.innerHTML = 'Hello I am Using ElementRef To Display this!';
  }
}

Wir müssen eine Vorlage in app.component.html mit der Klasse ElementRefDiv erstellen.

# angular
<div #ElementRefDiv></div>

Ausgabe:

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