Overføring av data til setteren i en underkomponent i Angular
Det er mulig å arrangere det slik at data fra foreldrekomponenten havner i setteren til en privat egenskap. La oss se på et eksempel. Anta at vi har en privat egenskap med en setter og 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;
}
}
La oss for eksempel lage en setter for alder, der vi implementerer sjekk av de overførte dataene. Vi lager også en getter for å vise brukerens 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;
}
}
La oss nå overføre data fra foreldrekomponenten til underkomponenten:
<user-data name="john"></user-data>
Og i underkomponenten viser vi det overførte navnet på skjermen:
<p>{{ name }}</p>
Forklar hvorfor den private egenskapen _name
starter med understrekstegnet.
Implementer settere og gettere for navnet på produktet og dets pris, som skal overføres fra foreldrekomponenten.