Angular ရှိ အမ‌ဒတ္ထို ကွန်ပိုနန်‌တ်သို့ အချက်အလက် လွှဲပြောင်းခြင်း

သားသမီး ကွန်ပိုနန်‌တ်မှ အမ‌ဒတ္ထို ကွန်ပိုနန်‌တ်သို့ အချက်အလက် လွှဲပြောင်းနိုင်ပါသည်။ ၎င်းကို EventEmitter အရာဝတ္ထုအထူးနှင့် emit နည်းလမ်းကို အသုံးပြု၍ ဖြစ်ရပ်များ ထုတ်လွှတ်ခြင်းဖြင့် လုပ်ဆောင်ပါသည်။ သားသမီး ကွန်ပိုနန်‌တ်သည် ဖြစ်ရပ်များကို ထုတ်လွှတ်ပြီး ဖြစ်ရပ်နှင့်အတူ အချက်အလက်အချို့ကို လွှဲပြောင်းပေးမည်ဖြစ်ကာ အမ‌ဒတ္ထို ကွန်ပိုနန်‌တ်သည် ထိုဖြစ်ရပ်များကို ဖမ်းယူကာ အမ‌ဒတ္ထို ကွန်ပိုနန်‌တ်မှ အချက်အလက်များကို ရယူမည်ဖြစ်သည်။

လက်တွေ့လုပ်ဆောင်ကြည့်ရအောင်။ ဤအတွက် ကျွန်ုပ်တို့သည် အဆင့်များစွာ လုပ်ဆောင်ရန် လိုအပ်ပါသည်။ အစပိုင်းတွင် ကျွန်ုပ်တို့၏ သားသမီး ကွန်ပိုနန်‌တ်ထဲသို့ @Output decorator နှင့် EventEmitter အတန်းကို တင်သွင်းရပါမည်။

app/user/user.component.tsimport { Component, Output, EventEmitter } from '@angular/core';

ယခု သားသမီး အတန်းထဲတွင် onData ဂုဏ်သတ္တိကို ပြုလုပ်ပါမည်။ ၎င်း၏ တန်ဖိုးမှာ စာကြောင်းတစ်ခုပါဝင်သော EventEmitter အရာဝတ္ထုအသစ် ဖြစ်ပါမည်။

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
}

ယခု send နည်းလမ်းကို ပြုလုပ်ပါမည်။ ၎င်း၏ ခေါ်ဆိုမှုသည် သတ်မှတ်ထားသော စာသားဖြင့် onData ဖြစ်ရပ်ကို အမ‌ဒတ္ထို ကွန်ပိုနန်‌တ်သို့ ထုတ်လွှတ်ပေးမည်ဖြစ်သည်။

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
  
  send() {
    this.onData.emit('xxx');
  }
}

သားသမီး ကွန်ပိုနန်‌တ်၏ template တွင် နှိပ်လိုက်သည်နှင့် send နည်းလမ်းကို ခေါ်ဆိုမည့် ခလုတ်တစ်ခု ပြုလုပ်ပါမည်။

app/user/user.component.html<button (click)="send()">
  send data
</button>

အမ‌ဒတ္ထို ကွန်ပိုနန်‌တ်ထဲတွင် onData နည်းလမ်းကို ပြုလုပ်ပါမည်။ ၎င်းသည် သားသမီး ကွန်ပိုနန်‌တ်မှ သက်ဆိုင်ရာ ဖြစ်ရပ်ကို ထုတ်လွှတ်သည့်အခါ အလိုအလျောက် ခေါ်ဆိုခြင်းခံရမည်ဖြစ်သည်။ လွှဲပြောင်းပေးသော အချက်အလက်များသည် နည်းလမ်း၏ parameter ထဲသို့ ရောက်ရှိလာမည်ဖြစ်သည်။

app/app.component.tsexport class AppComponent {
  public onData(data: string) {
    console.log(data);
  }
}

အမ‌ဒတ္ထို ကွန်ပိုနန်‌တ်၏ template တွင် သားသမီး ကွန်ပိုနန်‌တ် tag နှင့် ဖြစ်ရပ်ကို ချိတ်ဆက်ပါမည်။

app/app.component.html<app-user (onData)="onData($event)"></app-user>