การผูกเหตุการณ์สองทางใน Angular

ใน Angular ยังสามารถทำการผูกเหตุการณ์สองทาง ของคอมโพเนนต์ทั้งสองได้: คอมโพเนนต์หลักและคอมโพเนนต์ย่อย ลองทำ ในเทมเพลต HTML ของคอมโพเนนต์ย่อยเป็นอินพุตที่มีการผูกสองทาง ของชื่อผู้ใช้และฟังก์ชัน ที่เปลี่ยนชื่อ:

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

ไปที่คอมโพเนนต์ย่อยของเราและ นำเข้า Decorator @Input ลงไป มันจำเป็นสำหรับการทำงานกับอินพุต:

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

ต่อไปผูก Decorator @Input กับชื่อผู้ใช้ และผูก Decorator @Output กับออบเจ็กต์ userNameChange, ซึ่งจะถูกเรียกในฟังก์ชัน onNameChange:

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

ตอนนี้ไปที่คอมโพเนนต์หลักและ เพิ่มคุณสมบัติชื่อให้กับคลาสของมัน:

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

และในเทมเพลต HTML ของคอมโพเนนต์หลัก ทำการผูกสองทางของคุณสมบัติ userName กับค่าของคุณสมบัติ name ของคอมโพเนนต์หลัก:

<user-data [(userName)]="name"></user-data>
<p>คุณเลือกชื่อ: {{ name }}</p>

นำการผูกเหตุการณ์สองทาง ของคอมโพเนนต์หลักและคอมโพเนนต์ย่อยไปใช้ ตามตัวอย่างที่ให้ไว้ในบทเรียน

จากโจทย์ก่อนหน้า ให้ทำ การผูกสองทางของอายุผู้ใช้