Angular හි දරු කොටසක සැකසුම් ක්‍රියාකරුට දත්ත ප්‍රවාහනය කිරීම

දෙමව්පිය කොටසෙන් දත්ත එහි සැකසුම් ක්‍රියාකරුට පෞද්ගලික ගුණාංගයකට ලඟා වන පරිදි කළ හැකිය. අපි උදාහරණයක් බලමු. අපට සැකසුම් ක්‍රියාකරු සහ ලබන ක්‍රියාකරු සහිත පෞද්ගලික ගුණාංගයක් තිබිය යුතුය:

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;
  }
}

උදාහරණයක් ලෙස, අපි වයස සඳහා සැකසුම් ක්‍රියාකරුවක් සාදමු, එහි යොමු කරන ලද දත්ත පරීක්ෂා කිරීම ක්‍රියාත්මක කරමු. පරිශීලක ගුණාංග ප්‍රදර්ශනය කිරීම සඳහා ලබන ක්‍රියාකරුවක් ද සාදමු:

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;
  }
}

දැන් දෙමව්පිය කොටසෙන් දත්ත දරු කොටසට යොමු කරමු:

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

දරු කොටස තුළ, යොමු කරන ලද නම තිරය මත ප්‍රදර්ශනය කරමු:

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