Överföring av data till en barnkomponents setter i Angular
Det är möjligt att arrangera så att data från förälderkomponenten hamnar i settern för en privat egenskap. Låt oss titta på ett exempel. Låt oss säga att vi har en privat egenskap med en setter och en 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;
}
}
För exemplet, låt oss skapa en setter för ålder, där vi implementerar validering av skickad data. Vi skapar också en getter för att visa användarens egenskaper:
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;
}
}
Låt oss nu skicka data från förälderkomponenten till barnkomponenten:
<user-data name="john"></user-data>
Och i barnkomponenten visar vi det skickade namnet på skärmen:
<p>{{ name }}</p>
Förklara varför den privata egenskapen _name
börjar med ett understreck.
Implementera settrar och gettrar för produktnamnet och dess pris, som kommer att skickas från förälderkomponenten.