@Input และ @Output เป็นวิธีมาตรฐานที่คอมโพเนนต์พ่อแม่และลูกสื่อสารกัน: @Input ส่งข้อมูล (พ่อแม่ → ลูก) และ ส่งเหตุการณ์ (ลูก → พ่อแม่) รูปแบบนี้สะท้อนถึงรูปแบบสากล "props ลงไป เหตุการณ์ขึ้นไป".
@Input และ @Output เป็นวิธีมาตรฐานที่คอมโพเนนต์พ่อแม่และลูกสื่อสารกัน: @Input ส่งข้อมูล (พ่อแม่ → ลูก) และ ส่งเหตุการณ์ (ลูก → พ่อแม่) รูปแบบนี้สะท้อนถึงรูปแบบสากล "props ลงไป เหตุการณ์ขึ้นไป".
@Output// child: UserCardComponent
import { Component, Input } from "@angular/core";
@Component({ selector: "app-user-card", template: `<h2>{{ user.name }}</h2>` })
export class UserCardComponent {
@Input() user!: User; // receives data from the parent
@Input() showEmail = false; // with a default
}
<!-- parent passes data via property binding -->
<app-user-card [user]="currentUser" [showEmail]="true"></app-user-card>
// child emits an event the parent can listen to
import { Component, Output, EventEmitter } from "@angular/core";
@Component({
selector: "app-user-card",
template: `<button (click)="onDelete()">Delete</button>`,
})
export class UserCardComponent {
@Output() deleted = new EventEmitter<number>(); // declares an output event
onDelete() {
this.deleted.emit(this.user.id); // emit with a payload
}
}
<!-- parent listens via event binding -->
<app-user-card [user]="u" (deleted)="removeUser($event)"></app-user-card>
คอมโพเนนต์ลูกจะออกอากาศผ่าน EventEmitter คอมโพเนนต์พ่อแม่ผูกกับ (eventName) และรับเพย์โหลดเป็น $event คอมโพเนนต์ลูกไม่แก้ไขข้อมูลของพ่อแม่โดยตรง — มันจะร้องขอการกระทำโดยการออกอากาศ
Parent ──[user]──────────────→ Child (@Input: data down)
Parent ←──(deleted)=removeUser─ Child (@Output: events up)
name = input<string>(); // signal-based @Input (newer Angular)
deleted = output<number>(); // signal-based @Output
Angular เวอร์ชันล่าสุดเพิ่มฟังก์ชัน input()/output() ที่ใช้สัญญาณเป็นทางเลือก
@Input/@Output เป็นแกนหลักของการสื่อสารระหว่างพ่อแม่กับลูกและคอมโพเนนต์ที่สามารถนำกลับมาใช้ใหม่ใน Angular — พวกมันบังคับใช้การไหลของข้อมูลในทิศทางเดียว (ลงไปผ่านข้อมูลเข้า ขึ้นไปผ่านเหตุการณ์) ซึ่งทำให้ข้อมูลสามารถคาดการณ์ได้และคอมโพเนนต์ไม่เชื่อมโยง
การทำความเข้าใจคู่นี้เป็นสิ่งสำคัญสำหรับการสร้าง UI ของ Angular ที่ไม่ใช่เรื่องสำคัญ สำหรับการสื่อสารระหว่างคอมโพเนนต์ที่ไม่เกี่ยวข้อง คุณจะใช้บริการที่ใช้ร่วมกันหรือไลบรารีสถานะแทน