Μετάδοση Δεδομένων στον Setter ενός Παιδικού Component στο Angular
Μπορούμε να κανονίσουμε ώστε τα δεδομένα από το γονικό component να πέφτουν στον setter μιας ιδιωτικής ιδιότητας. Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε μια ιδιωτική ιδιότητα με setter και 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;
}
}
Για το παράδειγμα, ας φτιάξουμε ένα setter για την ηλικία, στον οποίο θα υλοποιήσουμε έλεγχο των δεδομένων που μεταδίδονται. Ας φτιάξουμε επίσης και ένα getter για την εμφάνιση των ιδιοτήτων του χρήστη:
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;
}
}
Τώρα ας μεταδώσουμε δεδομένα από το γονικό component στο παιδικό:
<user-data name="john"></user-data>
Και στο παιδικό component ας εμφανίσουμε το όνομα που μεταδόθηκε στην οθόνη:
<p>{{ name }}</p>
Εξηγήστε γιατί η ιδιωτική ιδιότητα _name
ξεκινά με τον χαρακτήρα υπογράμμισης.
Υλοποιήστε setters και getters για το όνομα ενός προϊόντος και την τιμή του, τα οποία θα μεταδίδονται από το γονικό component.