ngOnChanges และการเปลี่ยนแปลงอินพุต
ตอบสนองต่อการเปลี่ยนแปลงในคุณสมบัติอินพุต
ngOnChanges และการเปลี่ยนแปลงอินพุต เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การตอบสนองต่อการเปลี่ยนแปลงของอินพุต
ฮุก OnChanges ช่วยให้คอมโพเนนต์ตอบสนองเมื่อคุณสมบัติ @Input เปลี่ยนแปลง Angular จะเรียก ngOnChanges ก่อน ngOnInit และทุกครั้งที่อินพุตมีการอัปเดต
การใช้งาน OnChanges
ใช้อินเทอร์เฟซ OnChanges และเพิ่มเมธอด ngOnChanges ที่รับอ็อบเจ็กต์ SimpleChanges
import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
@Input() count = 0;
ngOnChanges(changes: SimpleChanges): void {
console.log(changes);
}
}อ็อบเจ็กต์ SimpleChanges
SimpleChanges คือแผนที่ที่มีชื่ออินพุตเป็นคีย์ แต่ละรายการเป็น SimpleChange ซึ่งมี currentValue, previousValue และ firstChange
ngOnChanges(changes: SimpleChanges) {
const c = changes["count"];
if (c) {
console.log(c.previousValue, "->", c.currentValue);
}
}การตรวจจับการเปลี่ยนแปลงครั้งแรก
แฟล็ก firstChange จะเป็น true ในครั้งแรกที่กำหนดค่าอินพุต ใช้แฟล็กนี้เพื่อแยกการเริ่มต้นออกจากการอัปเดตในภายหลัง
ngOnChanges(changes: SimpleChanges) {
if (changes["count"]?.firstChange) {
console.log("initial value");
} else {
console.log("updated value");
}
}การตอบสนองต่ออินพุตที่เจาะจง
ตรวจสอบเสมอว่ามีคีย์อยู่ก่อนอ่านค่า เนื่องจากอินพุตบางตัวอาจไม่ได้เปลี่ยนแปลงในทุกวัฏจักร
ngOnChanges(changes: SimpleChanges) {
if ("userId" in changes) {
this.reload(this.userId);
}
}การตรวจจับโดยอิงการอ้างอิง
ngOnChanges จะทำงานเมื่อ การอ้างอิง ของอ็อบเจ็กต์และอาร์เรย์เปลี่ยนแปลง การแก้ไขอ็อบเจ็กต์ที่ส่งเข้ามาเป็นอินพุตจะไม่เรียกใช้เมธอดนี้
// will NOT trigger ngOnChanges in parent-bound child:
this.config.theme = "dark";
// will trigger it:
this.config = { ...this.config, theme: "dark" };ลำดับการทำงานร่วมกับ ngOnInit
เมื่อสร้างคอมโพเนนต์ ngOnChanges จะทำงานก่อนพร้อมอินพุตเริ่มต้น จากนั้น ngOnInit จึงทำงาน หลังจากนั้น ngOnChanges จะทำงานอีกครั้งทุกครั้งที่อินพุตเปลี่ยนแปลง
การเปรียบเทียบค่าเก่ากับค่าใหม่
การใช้งานที่พบได้บ่อยคือการตอบสนองเฉพาะเมื่อค่าแตกต่างกันจริง เช่น โหลดข้อมูลใหม่เมื่ออินพุต id เปลี่ยนแปลง
ngOnChanges(changes: SimpleChanges) {
const id = changes["userId"];
if (id && id.currentValue !== id.previousValue) {
this.fetchUser(id.currentValue);
}
}การระบุชนิดเพื่อความปลอดภัย
คุณสามารถอ่านค่าจาก changes หรืออ่านโดยตรงจากคุณสมบัติของคอมโพเนนต์ก็ได้ หลังจาก ngOnChanges ทำงาน คุณสมบัตินั้นจะมีค่าปัจจุบันอยู่แล้ว
ngOnChanges() {
// this.count already updated here
this.total = this.count * 2;
}กรณีที่ไม่ควรใช้ OnChanges
สำหรับสถานะที่คำนวณจากอินพุตเพียงตัวเดียว การใช้ getter หรือค่าที่คำนวณแล้วอาจอ่านง่ายกว่า ควรใช้ ngOnChanges กับผลข้างเคียงที่ต้องทำงานเมื่ออินพุตอัปเดตเท่านั้น
อินพุตหลายตัวเปลี่ยนพร้อมกัน
หากอินพุตหลายตัวเปลี่ยนแปลงในวัฏจักรเดียวกัน ngOnChanges จะถูกเรียกหนึ่งครั้ง โดยมีอินพุตทั้งหมดอยู่ในแผนที่ SimpleChanges
ngOnChanges(changes: SimpleChanges) {
// both keys may be present
if (changes["min"] || changes["max"]) {
this.validateRange();
}
}ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจของคุณเกี่ยวกับ OnChanges
สรุปทบทวน
ฮุก OnChanges ตอบสนองต่อการเปลี่ยนแปลงของอินพุตผ่านแผนที่ SimpleChanges ซึ่งมี currentValue, previousValue และ firstChange ฮุกนี้ทำงานเมื่อการอ้างอิงเปลี่ยนแปลง ดังนั้นควรใช้อัปเดตแบบไม่เปลี่ยนแปลงข้อมูลเดิม
คำถามที่พบบ่อย
บทเรียน “ngOnChanges และการเปลี่ยนแปลงอินพุต” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ngOnChanges และการเปลี่ยนแปลงอินพุต” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ngOnChanges และการเปลี่ยนแปลงอินพุต”
ตอบสนองต่อการเปลี่ยนแปลงในคุณสมบัติอินพุต คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ngOnChanges และการเปลี่ยนแปลงอินพุต” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ngOnInit และการเริ่มต้น
- ngOnChanges และการเปลี่ยนแปลงอินพุต
- ngOnDestroy และการเก็บกวาด
- ฮุก AfterView และ AfterContent