Angular 8 DOM-Abfragen: ViewChild- und ViewChildren-Beispiel

Blog

Die Dekoratoren @ViewChild und @ViewChildren in Angular bieten eine Möglichkeit, auf DOM-Elemente, -Anweisungen und -Komponenten zuzugreifen und diese zu bearbeiten…

In diesem Tutorial sehen wir ein Angular 8-Beispiel für die Verwendung der beiden Dekorateure.

Sie können |_+_| . verwenden wenn Sie ein Element aus dem DOM und |_+_| . abfragen müssen für mehrere Elemente.

Wir werden eine Online-Entwicklungs-IDE verwenden, die ab erhältlich ist https://stackblitz.com/ Sie müssen Ihren lokalen Entwicklungscomputer zu diesem Zeitpunkt also nicht für Angular einrichten.

Gehen Sie zu Stackblitz, melden Sie sich mit Ihrem GitHub-Konto an und wählen Sie einen Angular-Workspace:

bash vergleicht zwei Strings

Ihnen sollte eine Online-IDE mit einem Angular 8-Projekt präsentiert werden:

Unser Angular-Projekt enthält die üblichen |_+_| Komponente und eine untergeordnete Komponente namens |_+_|und definiert in |_+_| Datei mit folgendem Code:

ViewChild

Die Komponente akzeptiert ein |_+_| -Eigenschaft und verwendet eine Inline-Vorlage, die einfach den Wert anzeigt, der über die name-Eigenschaft von der übergeordneten Komponente übergeben wird.

Im Komponenten-Dekorator haben wir verwendet Hallo als Selektor für die Komponente so im HTML-Template des |_+_| Komponente definiert im |_+_| Datei binden wir die untergeordnete Komponente mit dem folgenden Code ein:

ViewChildren

Nach dem Ausführen unserer Angular-Anwendung wird die Hello-Komponente gerendert und wird Teil des DOM, sodass wir sie wie jedes normale DOM-Element abfragen können.

Was ist ViewChild in Angular?

ViewChild ist ein Dekorator, der eine Ansicht oder DOM-Abfrage erstellt. Laut Dokumente

native-image-slider reagieren

Eigenschafts-Dekorator, der eine Ansichtsabfrage konfiguriert. Der Änderungsdetektor sucht nach dem ersten Element oder der Direktive, die mit dem Selektor im View-DOM übereinstimmt. Wenn sich das Ansichts-DOM ändert und ein neues untergeordnetes Element mit dem Selektor übereinstimmt, wird die Eigenschaft aktualisiert.
Der Decorator nimmt die folgenden Metainformationen:

  • |_+_| - der Selektor des abzufragenden Elements. Dies kann ein Direktiventyp oder ein Name sein.
  • |_+_| - einen anderen Token aus den abgefragten Elementen lesen.
  • |_+_| - Dies ist neu in Angular 8 und gibt an, ob Abfrageergebnisse aufgelöst werden sollen, bevor die Änderungserkennung ausgeführt wird.

|_+_| kann die folgenden Selektoren annehmen:

  • Klassen mit dem |_+_| oder |_+_| Dekorateure, d. h. Komponenten und Richtlinien,
  • Vorlagenreferenzvariablen,
  • Anbieter,
  • App

Kommen wir nun zurück zu unserem |_+_| Datei und lassen Sie uns sehen, wie wir die untergeordnete Komponente mit |_+_| abfragen können. Ändern Sie zuerst den Code entsprechend:

HelloComponent

In der Konsole solltest du bekommen Hallo Angular :

Lassen Sie uns nun den Code erklären.

Zuerst importierten wir |_+_| und |_+_| und |_+_| aus dem |_+_|Paket:

src/app/hello.component.ts

Als Nächstes erstellen wir eine Abfrage namens |_+_| das dauert |_+_| als Selektor und hat static gleich false:

import { Component, Input } from '@angular/core'; @Component({ selector: 'hello', template: `# Hello ! `, styles: [`h1 { font-family: Lato; }`] }) export class HelloComponent { @Input() name: string; }

In Angular 8, Timing für |_+_| und |_+_| muss explizit angegeben werden.

Siehe: ​ Warum muss ich angeben name ? Ist das nicht die Standardeinstellung?

Als nächstes im |_+_| Life-Cycle-Hook können wir die Abfrage verwenden, um auf das DOM-Element für die hello-Komponente zuzugreifen. In unserem Beispiel haben wir auf die name-Eigenschaft der Komponente zugegriffen, nachdem sie im DOM gemountet wurde, die die Eckig Zeichenfolge:

App

Wir können auf beliebige Eigenschaften und sogar Methoden aus der abgefragten Komponente zugreifen.

Notiz *: Ansichtsabfragen werden vor dem src/app/app.component.html Rückruf wird angerufen.*## Abfragen von Standard-HTML-Elementen mit Vorlagenreferenzen

Wir können auch Standard-HTML-Elemente mit |_+_| . abfragen und Vorlagenreferenzvariablen. Kommen wir zurück zu unserem |_+_| Datei und ändern Sie sie wie folgt:

Start editing to see some magic happen :)

Wir haben einfach die |_+_| . hinzugefügt Vorlagenverweis auf unsere Hello-Komponente. Lassen Sie uns nun unseren Code ändern, um auf die Komponente mithilfe ihrer Referenz zuzugreifen. Zurück zum |_+_| Datei und ändern Sie entsprechend:

selector

Wir importieren |_+_| und wir erstellen eine Abfragekonfiguration für den Zugriff auf das DOM-Element `````` mit dem |_+_| Vorlagenreferenz wie folgt:

read

Als nächstes im |_+_| Methode können wir mit dem |_+_| . auf das native DOM-Element zugreifen und es ändern Objekt von |_+_|:

static

Das ist das Live-Beispiel davon Verknüpfung .

Was ist ViewChildren in Angular?

|_+_| ist ein weiterer Eigenschafts-Dekorator, der verwendet wird, um das DOM nach mehreren Elementen abzufragen und a . zurückzugeben Abfrageliste .

Laut Dokumente :

Sie können ViewChildren verwenden, um die QueryList von Elementen oder Direktiven aus dem View-DOM abzurufen. Jedes Mal, wenn ein untergeordnetes Element hinzugefügt, entfernt oder verschoben wird, wird die Abfrageliste aktualisiert und die an der Abfrageliste beobachtbaren Änderungen geben einen neuen Wert aus.
Sehen wir uns ein Beispiel an.

Gehe zum |_+_| Datei und aktualisieren Sie sie wie folgt:

verspricht in Winkel 8
ViewChild

Wir geben die Hallo-Komponente einfach dreimal ab. Lassen Sie uns nun das DOM abfragen. Öffne die |_+_| Datei und ändern Sie sie wie folgt:

Packer- und Mover-Anwendung
@Component

Sie sollten diese Ausgabe in der Konsole:

Lassen Sie uns nun den Code erklären.

Zuerst importieren wir |_+_|, |_+_| und |_+_| von |_+_| Paket.

Als Nächstes erstellen wir eine vquery-Konfiguration für den Zugriff auf mehrere DOM-Elemente:

@Directive

|_+_| gibt ein |_+_| . zurück die eine Liste von Elementen speichert. Wenn sich der Status ändert, aktualisiert Angular diese Abfrageliste automatisch.

Schließlich im |_+_| -Methode können wir die Abfrageliste durchlaufen und jedes DOM-Element protokollieren:

TemplateRef

Das Live-Beispiel findet ihr hier Verknüpfung .

Schlussfolgerungen

In diesem Tutorial haben wir gesehen, wie wir mit |_+_| . auf das DOM in Angular 8 zugreifen und es ändern können und |_+_| Dekorateure und ein paar andere APIs wie |_+_| und |_+_|

#eckige #Webentwicklung

www.techiediaries.com

Angular 8 DOM-Abfragen: ViewChild- und ViewChildren-Beispiel

Die Dekoratoren @ViewChild und @ViewChildren in Angular bieten eine Möglichkeit, auf DOM-Elemente, -Anweisungen und -Komponenten zuzugreifen und diese zu bearbeiten...