Adatátvitel egy gyermek komponens setterébe az Angularban

Megtehetjük, hogy az adatok a szülő komponensből a privát tulajdonság setterébe kerüljenek. Nézzük egy példán. Tegyük fel, hogy van egy privát tulajdonságunk setterrel és getterrel:

app/user/user.component.tsclass UserComponent {
  private _name: string = '';
  
  set name(name: string) {
    if (name.length < 3) {
      this._name = name;
    } else {
      console.log('error');
    }
  }
  
  get age() {
    return this._userAge;
  }
}

A példa kedvéért készítsük el a kor setterét, amelyben implementáljuk az átadott adatok ellenőrzését. Készítsünk gettert is a felhasználó tulajdonságainak kiíratásához:

app/user/user.component.tsclass 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;
  }
}

Most pedig vigyük át az adatokat a szülő komponensből a gyermekbe:

app/app.component.html<user-data name="john"></user-data>

És a gyermek komponensben jelenítsük meg az átadott nevet a képernyőn:

app/user/user.component.html<p>{{ name }}</p>