Kind in Angular anzeigen

1. Verwendung von das ViewChild mit DOM-Elementen in Angular
2. Verwendung von das ViewChild mit untergeordneten Komponenten in Angular

Das @ViewChild ist ein Decorator in Angular, der am häufigsten verwendet wird. Es ist einer der ersten Dekorateure, denen wir beim Erlernen von Angular begegnen.

@ViewChild hat viele Funktionen, die in diesem Tutorial besprochen werden, mit praktischen Beispielen für jeden Anwendungsfall.

Das @ViewChild ist ein Eigenschafts-Decorator, der eine Ansichtsabfrage konfiguriert. Die Eigenschaft wird aktualisiert, wenn sich das Ansichts-DOM ändert und ein neues Kind mit dem Selektor übereinstimmt.

Wir können @ViewChild mit Direktiven, DOM-Elementen und untergeordneten Komponenten verwenden. Wir können in Beispielen verstehen, wie man @ViewChild mit ihnen verwendet.

Lassen Sie uns eine neue Anwendung erstellen, indem Sie den folgenden Befehl verwenden.

# angular
ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# angular
cd my-app

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

# angular
ng serve --open

Lassen Sie uns eine Direktive erstellen, LanguageDirective. Diese Direktive sucht nach Elementen mit dem Attribut appLanguage und stellt dem Text im Element das Wort Language voran.

Es gibt zwei Möglichkeiten, eine Direktive mit @angular/cli zu generieren oder eine Datei language.directive.ts zu erstellen.

# Angular
ng generate directive language --skip-tests

Dieser Befehl erstellt eine language.directive.ts-Datei und fügt die Direktive zur app.module.ts-Datei hinzu. Und wir werden ElementRef und Renderer2 verwenden, um den Text neu zu schreiben.

Unser Code in language.directive.ts sieht also wie folgt aus.

# angular
import {
  Directive,
  ElementRef,
  Renderer2
} from '@angular/core';

@Directive(
  { selector: '[appLanguage]' }
)
export class LanguageDirective {
  language = 'NodeJs';

  constructor(elem: ElementRef, renderer: Renderer2) {
    let language = renderer.createText('Language ');
    renderer.appendChild(elem.nativeElement, language);
  }
}

Und der Code in app.module.ts sieht wie folgt aus.

# Angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { LanguageDirective } from './language.directive';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent, LanguageDirective],
  bootstrap: [AppComponent],
})
export class AppModule {}

Fügen Sie das Attribut appLanguage zu li hinzu, das Text in der Komponentenvorlage enthält. Unser Code in app.component.html sieht also wie folgt aus.

# Angular
<h2>Programming Languages</h2>
<ul>
  <li appLanguage>Angular</li>
  <li appLanguage>React</li>
  <li appLanguage>React Native</li>
</ul>

Ausgabe:

Das Wort Language vor dem Elementinhalt kann auch auf die Instanzvariable von LanguageDirective zugreifen und eine extraLanguage-Instanzvariable mit ihrem Wert setzen.

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

# Angular
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { LanguageDirective } from './language.directive';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  extraLanguage!: string;

  @ViewChild(LanguageDirective)
  set appLanguage(directive: LanguageDirective) {
    this.extraLanguage = directive.language;
  }

  ngAfterViewInit() {
    console.log(this.extraLanguage); // NodeJs
  }
}

Wir haben im obigen Code einen Setter verwendet, um die Variable extraLanguage zu setzen.

Nun werden Sie feststellen, dass auf den Lebenszyklus-Hook AfterViewInit gewartet wird, um auf die Variable zuzugreifen, da untergeordnete Komponenten und Direktiven verfügbar werden, nachdem die anfängliche Ansicht geladen wurde.

Ausgabe:

Die obige Ausgabe zeigt, dass die übergeordnete Komponente mit @ViewChild auf den Wert aus der Direktive zugreifen konnte.

Verwendung von das ViewChild mit DOM-Elementen in Angular

Wir werden DOM-Elemente durchgehen und in diesem Beispiel mit @ViewChild darauf zugreifen. @ViewChild ermöglicht uns den Zugriff auf die nativen DOM-Elemente mit einer Template-Referenzvariablen.

Lassen Sie uns eine neue Anwendung erstellen, indem Sie den folgenden Befehl verwenden.

# angular
ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# angular
cd my-app

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

# angular
ng serve --open

Zum Beispiel haben wir ein Eingabe-Tag in app.component.html mit der unten im Code gezeigten Referenzvariablen #forViewChild.

# Angular
<input #forViewChild placeholder="Your favorite Programming Language">

Wir werden auch etwas CSS in app.component.css hinzufügen.

# Angular
p {
  font-family: Lato;
}
input {
  padding: 5px 10px;
}
label {
  font-size: 20px;
  padding-right: 10px;
}

Ausgabe:

Nun können wir mit @ViewChild auf die Eingabe zugreifen und den Wert setzen. Unser Code in app.component.ts sieht wie folgt aus.

# angular
import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('forViewChild') forViewChild!: ElementRef;
  ngAfterViewInit() {
    this.forViewChild.nativeElement.value = 'Angular!';
  }
}

Wenn also ngAfterViewInit ausgeführt wird, wird der Eingabewert geändert und auf Angular! gesetzt. wie im folgenden Beispiel gezeigt.

Ausgabe:

Wie Sie im obigen Beispiel sehen können, setzt die Elternkomponente den Wert des untergeordneten DOM-Elements mit @ViewChild.

Verwendung von das ViewChild mit untergeordneten Komponenten in Angular

Mit @ViewChild können wir auf eine untergeordnete Komponente zugreifen und Methoden oder Instanzvariablen aufrufen, die dem untergeordneten Element zur Verfügung stehen. Jetzt werden wir ein Beispiel durchgehen, um zu verstehen, wie wir @ViewChild mit untergeordneten Komponenten in Angular verwenden können.

Lassen Sie uns eine neue Anwendung erstellen, indem Sie den folgenden Befehl verwenden.

# angular
ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# angular
cd my-app

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

# angular
ng serve --open

Lassen Sie uns nun eine neue Komponente als HelloComponent erstellen.

Wir können eine neue Komponente auf zwei Arten erstellen. Indem Sie ein @angular/cli verwenden und den folgenden Befehl ausführen.

# Angular
ng generate component hello --flat --skip-tests

Mit diesem Befehl werden die Dateien hello.component.ts, hello.component.html und hello.component.css erstellt. Oder wir können diese Dateien manuell erstellen.

Nun müssen wir in app.module.ts die neu erstellte Komponente hinzufügen. Unser Code in app.module.ts sieht wie folgt aus.

# Angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Wir werden eine GreetingMessage-Methode zu HelloComponent hinzufügen, um eine Nachricht zurückzugeben.

# Angular
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css'],
})
export class HelloComponent implements OnInit {
  constructor() {}

  GreetingMessage() {
    return 'Hello Member!';
  }

  ngOnInit(): void {}
}

Nun referenzieren wir die untergeordnete Komponente in der app.component.html mit <hello>. Unser Code sieht also wie folgt aus.

# Angular
<hello>It Works</hello>

Wir rufen die Methode GreetingMessage aus der übergeordneten Komponentenklasse app.component.ts mit @ViewChild auf. Unser Code sieht also wie folgt aus.

# Angular
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { HelloComponent } from './hello.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild(HelloComponent) hello!: HelloComponent;

  ngAfterViewInit() {
    console.log(this.hello.GreetingMessage());
  }
}

Ausgabe:

In diesem Tutorial haben wir anhand von Beispielen gelernt, wie man @ViewChild in verschiedenen Situationen verwendet.