Table of Contents
Einführung
Dieser Artikel stellt Ihnen den Dekorateur ViewChild von Angular vor.
Es kann Situationen geben, in denen Sie aus einer übergeordneten Komponentenklasse auf eine Anweisung, eine untergeordnete Komponente oder ein DOM-Element zugreifen möchten. Der ViewChild -Decorator gibt das erste Element zurück, das einer bestimmten Anweisung, einer Komponente oder einem Auswahlelement für die Vorlagenreferenz entspricht.
Verwenden von ViewChild mit Anweisungen
ViewChild ermöglicht es, auf Anweisungen zuzugreifen.
Nehmen wir an, wir haben eine SharkDirective.
Im Idealfall verwenden Sie @angular/cli, um Ihre Anweisung zu generieren:
ng generate directive shark
Andernfalls müssen Sie sie gegebenenfalls manuell zu app.module.ts hinzufügen:
[label app.module.ts]
<^>import { SharkDirective } from './shark.directive';<^>
...
@NgModule({
declarations: [
AppComponent,
<^>SharkDirective<^>
],
...
})
Unsere Anweisung sucht nach Elementen mit dem Attribut appShark und gibt den Text im Element mit dem Wort Shark vor:
[label shark.directive.ts]
import {
Directive,
ElementRef,
Renderer2
} from '@angular/core';
@Directive(
{ selector: '[appShark]' }
)
export class SharkDirective {
creature = 'Dolphin';
constructor(elem: ElementRef, renderer: Renderer2) {
let shark = renderer.createText('Shark ');
renderer.appendChild(elem.nativeElement, shark);
}
}
Als Nächstes fügen wir Shark zu Fin hinzu, indem wir es in der Komponentenvorlage verwenden:
[label app.component.html]
<span <^>appShark<^>>Fin!</span>
Bei der Anzeige der Anweung in einem Browser wird es dargestellt als:
[secondary_label Output]
Shark Fin!
Jetzt können wir auf die Instanzvariable creature von SharkDirective zugreifen und eine Instanzvariable extraCreature mit ihrem Wert festlegen:
[label app.component.ts]
import {
Component,
ViewChild,
AfterViewInit
} from '@angular/core';
import { SharkDirective } from './shark.directive';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
extraCreature: string;
@ViewChild(SharkDirective)
set appShark(directive: SharkDirective) {
this.extraCreature = directive.creature;
};
ngAfterViewInit() {
console.log(this.extraCreature); // Dolphin
}
}
Wir haben hier einen Setter verwendet, um die Variable extraCreature festzulegen. Beachten Sie, dass wir warten, bis der AfterViewInit–Lifecycle-Hook auf unsere Variable zugreift, da dann untergeordnete Komponenten und Anweisungen verfügbar werden.
Wenn wir die Anwendung in einem Browser anzeigen, sehen wir immer noch das "Shark Fin!" („es hat funktioniert!“ ). Im Konsolenprotokoll wird es jedoch folgendermaßen angezeigt:
[secondary_label Output]
Dolphin
Die übergeordnete Komponente konnte aus der Anweisung auf den Wert zugreifen.
Verwenden von ViewChild mit DOM-Elementen
ViewChild ermöglicht es Ihnen, auf native DOM-Elemente zuzugreifen, die eine Vorlagenreferenzvariable haben.
Nehmen wir an, wir haben ein <input> unserer Vorlage mit der Referenzvariable #someInput:
[label app.component.html]
<input <^>#someInput<^> placeholder="Your favorite sea creature">
Jetzt können wir mit ViewChild auf das <input> zugreifen und den Wert festlegen:
[label app.component.ts]
import {
Component,
ViewChild,
AfterViewInit,
ElementRef
} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
@ViewChild('someInput') someInput: ElementRef;
ngAfterViewInit() {
this.someInput.nativeElement.value = 'Whale!';
}
}
Wenn ngAfterViewInit ausgelöst wird, wird der Wert unseres <input> auf Folgendes gesetzt:
[secondary_label Output]
Whale!
Die übergeordnete Komponente konnte den Wert des untergeordneten DOM-Elements festlegen.
Verwenden von ViewChild mit untergeordneten Komponenten
ViewChild ermöglicht den Zugriff auf eine untergeordnete Komponente und den Aufruf von Methoden oder den Zugriff auf Instanzvariablen, die dem untergeordneten Element zur Verfügung stehen.
Nehmen wir an, wir haben eine ChildComponent. Im Idealfall verwenden Sie @angular/cli, um Ihre Komponente zu generieren:
ng generate component child --flat
Andernfalls müssen Sie child.component.css und child.component.html-Dateien erstellen und manuell zu app.module.ts hinzufügen:
[label app.module.ts]
<^>import { ChildComponent } from './child.component';<^>
...
@NgModule({
declarations: [
AppComponent,
<^>ChildComponent<^>
],
...
})
Wir fügen die whoAml-Methode zur ChildComponent hinzu, die eine Nachricht zurückgibt:
[label child.component.ts]
whoAmI() {
return 'I am a child component!';
}
Nächstes referieren wir die Komponente in unserer App-Vorlage:
[label app.component.html]
<app-child>child works!</app-child>
Jetzt können wir die whoAmI-Methode aus unserer übergeordneten Komponenten-Klasse mit ViewChild wie folgt aufrufen:
[label app.component.ts]
import {
Component,
ViewChild,
AfterViewInit
} from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
@ViewChild(ChildComponent) child: ChildComponent;
ngAfterViewInit() {
console.log(this.child.whoAmI()); // I am a child component!
}
}
Bei der Betrachtung der Anwendung in einem Browser wird das Konsolenprotokoll angezeigt:
[secondary_label Output]
I am a child component!
Die übergeordnete Komponente konnte whoAmI-Methode der untergeordneten Komponente aufrufen.
Zusammenfassung
Sie haben gelernt, ViewChild für den Zugriff auf eine Anweisung, eine untergeordnete Komponente und ein DOM-Element aus einer übergeordneten Komponenten-Klasse zu verwenden.
Wenn sich die Referenz dynamisch in ein neues Element ändert, aktualisiert ViewChild automatisch ihre Referenz.
In Fällen, in denen Sie auf mehrere untergeordnete Komponenten zugreifen möchten, verwenden Sie stattdessen ViewChild.
Wenn Sie mehr über Angular erfahren möchten, lesen Sie unsere Seite Angular für Übungen und Programmierprojekte.
