Datenübergabe an den Setter einer Kindkomponente in Angular
Man kann es so einrichten, dass Daten aus der Elternkomponente in den Setter einer privaten Eigenschaft gelangen. Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben eine private Eigenschaft mit Setter und Getter:
class UserComponent {
private _name: string = '';
set name(name: string) {
if (name.length < 3) {
this._name = name;
} else {
console.log('error');
}
}
get age() {
return this._userAge;
}
}
Erstellen wir für das Beispiel einen Setter für das Alter, in dem wir eine Überprüfung der übergebenen Daten implementieren. Erstellen wir auch einen Getter für die Ausgabe der Benutzereigenschaften:
class UserComponent {
private _name: string = '';
@Input()
set name(name: string) {
if (name.length > 3) {
this._name = name;
} else {
console.log('error');
}
}
get name() {
return this._name;
}
}
Übergeben wir nun Daten von der Elternkomponente an die Kindkomponente:
<user-data name="john"></user-data>
Und in der Kindkomponente geben wir den übergebenen Namen auf dem Bildschirm aus:
<p>{{ name }}</p>
Erklären Sie, warum die private Eigenschaft _name
mit einem Unterstrich beginnt.
Implementieren Sie Setter und Getter für den Produktnamen und seinen Preis, die von der Elternkomponente übergeben werden sollen.