Angular တွင် Child Component ထံသို့ ဒေတာများ ပေးပို့ခြင်း

မိဘ component မှ child component ထံသို့ ဒေတာများ ပေးပို့နိုင်ပါသည်။ ထိုဒေတာများသည် child class ၏ properties များထဲသို့ ရောက်ရှိသွားမည်ဖြစ်ပါသည်။ ထိုသို့ပြုလုပ်ပုံကို ကြည့်ကြရအောင်။

ဦးစွာ၊ child component class တွင် properties များ ပြုလုပ်ပါမည်။ ထို properties များထဲသို့ မိဘ component မှ ဒေတာများ ထည့်သွင်းမည်ဖြစ်သည်။

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

ယခု ဤ properties များထဲသို့ အပြင်ဘက်မှ ဒေတာများ ရောက်ရှိလာမည်ကို ကြေညာရန်လိုအပ်ပါသည်။ ဤအတွက် အထူး decorator Input ကို အသုံးပြုပါသည်။ ထို decorator ကို ကျွန်ုပ်တို့၏ child component ထဲသို့ import လုပ်ပါမည်။

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

ယခု ထို decorator ကို ကျွန်ုပ်တို့၏ properties များအတွက် အသုံးပြုပါမည်။

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

Child component ၏ template ဖိုင်ထဲတွင် ဒေတာများကို ထုတ်ပြခြင်းကို ထည့်သွင်းပါမည်။

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

ယခု မိဘ component ၏ template တွင် child component tag ကို ခေါ်သုံးသည့်အခါ၊ ကျွန်ုပ်တို့၏ child class properties များ၏ အမည်များနှင့် ကိုက်ညီမည့် attributes များကို ရေးသားပါမည်။ ထို attributes များ၏ တန်ဖိုးများသည် child class ၏ properties များထဲသို့ ရောက်ရှိသွားမည်ဖြစ်သည်။

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