Angular တွင် ဖြစ်ရပ်များ၏ နှစ်ဖက်ညှိချည်နှောင်မှု

Angular တွင် မိဘနှင့် သားသမီး component နှစ်ခုစလုံး၏ ဖြစ်ရပ်များအား နှစ်ဖက်ညှိချည်နှောင်မှု ပြုလုပ်နိုင်သည်။ သားသမီး HTML template ထဲတွင် အသုံးပြုသူအမည်နှင့် ၎င်းအမည်ကို ပြောင်းလဲပေးမည့် function အတွက် နှစ်ဖက်ညှိ input တစ်ခု ပြုလုပ်ကြည့်ရအောင်:

app/user/user.component.html<input [ngModel]="userName" (ngModelChange)="onNameChange($event)" />

ကျွန်ုပ်တို့၏ သားသမီး component ထဲသို့ သွားပြီး decorator @Input ကို import လုပ်ပါ။ ၎င်းသည် input များနှင့် အလုပ်လုပ်ရန် လိုအပ်ပါသည်:

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

ထို့နောက် decorator @Input ကို အသုံးပြုသူအမည်နှင့် ချည်နှောင်ပါ။ Decorator @Output ကို object userNameChange နှင့် ချည်နှောင်ပါ၊ ထို object ကို function onNameChange အတွင်းတွင် အသုံးပြုမည်ဖြစ်သည်:

app/user/user.component.tsexport class UserComponent {
  @Input() userName: string = '';
  @Output() userNameChange = new EventEmitter<string>();
  onNameChange(model: string) {
    this.userName = model;
    this.userNameChange.emit(model);
  }
}

ယခု အဓိက component ထဲသို့ သွားပြီး ၎င်း၏ class ထဲတွင် အမည် property ကို ထည့်ပါ:

app/app.component.tsexport class AppComponent {
  name: string = 'alex';
}

မိဘ component ၏ HTML template ထဲတွင် property userName ၏ နှစ်ဖက်ညှိချည်နှောင်မှုကို မိဘ component ၏ property name တန်ဖိုးနှင့် လုပ်ဆောင်ပါ:

ap.component.html<user-data [(userName)]="name"></user-data>
<p>သင်ရွေးချယ်ထားသော အမည်: {{ name }}</p>