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

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

<input [ngModel]="userName" (ngModelChange)="onNameChange($event)" />

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

import { Component, Input, Output, EventEmitter } from '@angular/core';

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

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

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

export class AppComponent {
	name: string = 'alex';
}

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

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

သင်ခန်းစာတွင် ဖော်ပြထားသည့် နမူနာအတိုင်း မိဘနှင့် သားသမီး component များ၏ ဖြစ်ရပ်များအတွက် နှစ်ဖက်ညှိချည်နှောင်မှုကို အကောင်အထည်ဖော်ပါ။

ယခင်တာဝန်အပေါ် အခြေခံ၍ အသုံးပြုသူ၏ အသက်အတွက် နှစ်ဖက်ညှိချည်နှောင်မှုကို ပြုလုပ်ပါ။