ඇන්ගුලර් හි දරු සංරචකයකට දත්ත යැවීම

මාපක සංරචකයෙන් දරු සංරචකයකට දත්ත යැවිය හැකිය. මෙම දත්ත දරු පංතියේ ගුණාංගවලට ඇතුළු වේ. එය කරන්නේ කෙසේදැයි අපි බලමු.

පළමුව, මාපක සංරචකයෙන් දත්ත ආනයනය කිරීමට දරු සංරචකයේ පංතියේ ගුණාංග සාදන්න:

app/user/user.component.tsclass UserComponent {
  public name: string = '';
  public age: number = 0;
}

දැන් අපි මෙම ගුණාංගවලට පිටතින් දත්ත ලැබෙන බව ප්‍රකාශ කළ යුතුය. මේ සඳහා විශේෂ අලංකාරකය Input භාවිතා කරයි. එය අපගේ දරු සංරචකයට ආනයනය කරමු:

app/user/user.component.tsimport { Input } from '@angular/core';

දැන් මෙම අලංකාරකය අපගේ ගුණාංග සඳහා යොදමු:

app/user/user.component.tsclass UserComponent {
  @Input()
  public name: string = '';
  
  @Input()
  public age: number = 0;
}

දරු සංරචකයේ අච්චු ගොනුවට දත්ත ප්‍රතිදානය එක් කරමු:

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

දැන්, දරු සංරචක ටැගය කැඳවන විට, මාපකයේ අච්චුවේ, අපගේ දරු පංති ගුණාංගවල නම් සමඟ ගැලපෙන ගුණාංග ලියන්න. මෙම ගුණාංගවල අගයන් දරු පංති ගුණාංගවලට ඇතුළු වේ:

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