เอาต์พุตด้วย output()
ส่งเหตุการณ์ด้วย API output แบบใหม่
เอาต์พุตด้วย output() เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
เอาต์พุตในยุคของ Signal
นอกจากอินพุตแบบ Signal แล้ว Angular สมัยใหม่ยังมีฟังก์ชัน output() สำหรับประกาศเหตุการณ์ของคอมโพเนนต์ เพื่อแทนที่ @Output แบบเดิมที่ใช้ร่วมกับ EventEmitter
การประกาศเอาต์พุต
เรียกใช้ output() เพื่อสร้างเหตุการณ์ที่คอมโพเนนต์สามารถส่งออกได้ ระบุชนิดแบบทั่วไปสำหรับข้อมูลที่ส่งไปกับเหตุการณ์
import { Component, output } from "@angular/core";
@Component({ selector: "app-counter", template: "" })
export class CounterComponent {
changed = output<number>();
}การส่งเหตุการณ์
เรียกใช้ emit บนเอาต์พุตเพื่อส่งค่าไปยังผู้ฟัง
export class CounterComponent {
changed = output<number>();
count = 0;
inc() {
this.count++;
this.changed.emit(this.count);
}
}การรับฟังจากคอมโพเนนต์แม่
คอมโพเนนต์แม่สมัครรับเหตุการณ์ด้วยการผูกเหตุการณ์ โดยใช้ $event สำหรับข้อมูลที่ส่งออก
<app-counter (changed)="onChange($event)"></app-counter>
// parent
onChange(value: number) {
this.total = value;
}เอาต์พุตที่ไม่มีข้อมูลส่งไปด้วย
สำหรับเหตุการณ์ที่ไม่มีข้อมูล ให้ใช้ output<void>() และส่งออกโดยไม่ระบุอาร์กิวเมนต์
closed = output<void>();
close() {
this.closed.emit();
}output เทียบกับ EventEmitter
API output() เรียบง่ายกว่าและไม่ผูกติดกับ RxJS คุณไม่ต้องสร้างอินสแตนซ์ EventEmitter เพราะฟังก์ชันจะดำเนินการให้เอง
// classic:
@Output() changed = new EventEmitter<number>();
// modern:
changed = output<number>();การตั้งชื่อแทนให้เอาต์พุต
เปิดเผยชื่อเหตุการณ์สาธารณะเป็นชื่ออื่นได้ด้วยตัวเลือก alias
valueChange = output<number>({ alias: "change" });
<!-- parent listens with the alias -->
<app-counter (change)="onChange($event)"></app-counter>เอาต์พุตและการผูกสองทาง
การจับคู่ input กับ output ที่ชื่อ xChange จะเปิดใช้การผูกสองทางได้ แม้ว่า model() จะทำสิ่งนี้ได้กระชับกว่า
value = input(0);
valueChange = output<number>();
// enables [(value)] on the parentการสร้างเอาต์พุตจากออบเซอร์เวเบิล
ตัวช่วยทำงานร่วมกัน outputFromObservable จะแปลง Observable ให้เป็นเอาต์พุต เพื่อเชื่อมสตรีมของ RxJS เข้ากับ API ใหม่
import { outputFromObservable } from "@angular/core/rxjs-interop";
clicks = outputFromObservable(this.clicks$);ความปลอดภัยด้านชนิด
เนื่องจากเอาต์พุตมีการระบุชนิด พารามิเตอร์ของตัวจัดการในคอมโพเนนต์แม่จะถูกตรวจสอบเทียบกับชนิดข้อมูลที่ส่งออก ทำให้ตรวจพบชนิดที่ไม่ตรงกันได้ขณะคอมไพล์
selected = output<{ id: number }>();
<!-- parent must accept { id: number } -->
<app-list (selected)="pick($event)"></app-list>เมื่อใดควรใช้ output
ควรใช้ output() กับคอมโพเนนต์ใหม่ เพราะมีน้ำหนักเบา ปลอดภัยด้านชนิด และทำงานร่วมกับอินพุตแบบ Signal ได้อย่างเป็นธรรมชาติ เพื่อจำลองการสื่อสารระหว่างคอมโพเนนต์
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจของคุณเกี่ยวกับฟังก์ชันเอาต์พุต
สรุปทบทวน
ฟังก์ชัน output() ใช้ประกาศเหตุการณ์ที่มีการระบุชนิดโดยไม่ต้องใช้ EventEmitter ส่งเหตุการณ์ด้วย emit() รับฟังผ่านการผูกเหตุการณ์และ $event ตั้งชื่อแทนเมื่อจำเป็น และใช้คู่กับอินพุตแบบ Signal เพื่อการสื่อสารระหว่างคอมโพเนนต์ที่เป็นระเบียบ
คำถามที่พบบ่อย
บทเรียน “เอาต์พุตด้วย output()” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เอาต์พุตด้วย output()” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เอาต์พุตด้วย output()”
ส่งเหตุการณ์ด้วย API output แบบใหม่ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “เอาต์พุตด้วย output()” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- อินพุตสัญญาณด้วย input()
- อินพุตที่จำเป็นและอินพุตที่แปลงค่า
- เอาต์พุตด้วย output()
- การค้นหามุมมองด้วย viewChild