Question 1

กลไก change detection ใน Angular คืออะไร?

Accepted Answer

Change detection คือกระบวนการที่ Angular ตรวจจับการเปลี่ยนแปลงในสถานะของแอปพลิเคชันและอัปเดต DOM ตามนั้น โดยค่าเริ่มต้น Angular ใช้ Zone.js เพื่อตรวจจับ event แบบ asynchronous (clicks, HTTP requests, timers) โดยอัตโนมัติ และเรียกใช้การตรวจสอบ component ตั้งแต่ root การตรวจสอบนี้จะเดินผ่านต้นไม้ของ component เพื่อระบุการแก้ไขที่จะนำไปใช้กับ DOM

Question 2

บทบาทของ Zone.js ใน Angular change detection คืออะไร?

Accepted Answer

Zone.js เป็นไลบรารีที่ patch API asynchronous ของเบราว์เซอร์ (setTimeout, Promise, addEventListener เป็นต้น) เพื่อสกัดการทำงานของมัน เมื่อการทำงานแบบ asynchronous เสร็จสิ้น Zone.js จะแจ้ง Angular ซึ่งจะกระตุ้น change detection โดยอัตโนมัติจาก root component สิ่งนี้ทำให้ Angular ตรวจจับการเปลี่ยนแปลงได้โดยไม่ต้องมีการแทรกแซงด้วยตนเองจากนักพัฒนา

Question 3

ความแตกต่างระหว่างกลยุทธ์ Default และ OnPush คืออะไร?

Accepted Answer

กลยุทธ์ Default ตรวจสอบ component ทั้งหมดในต้นไม้ในทุก ๆ รอบของ change detection ซึ่งอาจมีค่าใช้จ่ายสูง OnPush เพิ่มประสิทธิภาพโดยตรวจสอบ component เฉพาะเมื่อ input เปลี่ยนแปลง (การอ้างอิงที่ไม่เปลี่ยนแปลง) หากมี event ถูกปล่อยจาก template หาก async pipe ได้รับค่าใหม่ หรือหาก markForCheck() ถูกเรียกใช้ด้วยตนเอง OnPush ลดจำนวนการตรวจสอบลงอย่างมากและช่วยปรับปรุงประสิทธิภาพ

Change Detection

กลไก change detection ใน Angular คืออะไร?

คำตอบ

บทบาทของ Zone.js ใน Angular change detection คืออะไร?

คำตอบ

ความแตกต่างระหว่างกลยุทธ์ Default และ OnPush คืออะไร?

คำตอบ

วิธีเปิดใช้กลยุทธ์ OnPush บน component อย่างไร?

วัตถุประสงค์ของ ChangeDetectorRef ใน component ของ Angular คืออะไร?

หัวข้อสัมภาษณ์ Angular อื่นๆ

พื้นฐาน TypeScript

TypeScript ขั้นสูง

พื้นฐาน Angular

คอมโพเนนต์และวงจรชีวิต

Services & Dependency Injection

การจัดระเบียบโมดูล Angular

Angular CLI

Directives และ Pipes

Routing และการนำทาง

Reactive Forms

Template-driven Forms

พื้นฐาน RxJS

Operator ของ RxJS

HttpClient และการเรียก API

การจัดการ state พื้นฐาน

Angular Signals

Standalone Components

การทำ Unit Testing ใน Angular

การทดสอบ End-to-End

Build และการเพิ่มประสิทธิภาพ

พื้นฐาน NgRx

NgRx ขั้นสูง

สถาปัตยกรรม Angular

การปรับแต่งประสิทธิภาพ

ความปลอดภัยและแนวทางปฏิบัติที่ดี

รูปแบบ RxJS ขั้นสูง

Angular Universal และ SSR

Angular Micro-frontends

เชี่ยวชาญ Angular สำหรับการสัมภาษณ์ครั้งถัดไป