Angular แบบไร้โซน
เรียกใช้ Angular โดยไม่ใช้ Zone.js
Angular แบบไร้โซน เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
ก้าวข้าม Zone.js
Zone.js มีภาระการทำงานและแพตช์ API ส่วนกลาง Angular สมัยใหม่มีโหมดไร้โซน ซึ่งขับเคลื่อนการตรวจจับการเปลี่ยนแปลงด้วย signals และการแจ้งเตือนอย่างชัดเจน แทนการแพตช์โซน
การเปิดใช้โหมดไร้โซน
ระบุผู้ให้บริการการตรวจจับการเปลี่ยนแปลงแบบไร้โซนในการตั้งค่าการเริ่มต้นแอป
bootstrapApplication(AppComponent, {
providers: [
provideExperimentalZonelessChangeDetection()
]
});นำ Zone.js ออก
ในโหมดไร้โซน คุณควรนำ polyfill zone.js ออกจากการตั้งค่าการสร้างแอปด้วย ซึ่งจะช่วยลดขนาดบันเดิลและค่าใช้จ่ายในการเริ่มต้น
// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'ตอนนี้อะไรเป็นตัวกระตุ้นการตรวจจับ
เมื่อไม่มีโซน Angular จะจัดกำหนดการตรวจจับการเปลี่ยนแปลงเมื่อ signal ที่อ่านในแม่แบบเปลี่ยนแปลง pipe async ส่งค่า การผูกเหตุการณ์ทำงาน หรือมีการเรียก markForCheck()
Signals คือศูนย์กลาง
แอปแบบไร้โซนพึ่งพา signals อย่างมากสำหรับจัดการสถานะ การอ่าน signal ในแม่แบบจะสร้างการพึ่งพา และการอัปเดต signal จะแจ้งให้ Angular รีเฟรชมุมมองนั้น
count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CDเหตุการณ์ยังคงแจ้งเตือน
การผูกเหตุการณ์ในแม่แบบจะแจ้งให้ Angular ทราบโดยตรง ดังนั้นการโต้ตอบของผู้ใช้ยังคงอัปเดต UI ได้โดยไม่ต้องใช้โซน
<button (click)="count.update(c => c + 1)">+</button>งานแบบอะซิงโครนัสโดยไม่มีโซน
setTimeout โดยตรง หรืองานอะซิงโครนัสที่ไม่ใช่ signal จะไม่กระตุ้นการตรวจจับโดยอัตโนมัติอีกต่อไป ให้ห่อหุ้มสถานะดังกล่าวไว้ใน signals หรือเรียก markForCheck()
setTimeout(() => this.ready.set(true), 1000);ความเข้ากันได้ของ Pipe async
Pipe async ยังคงทำงานในโหมดไร้โซน เพราะจะทำเครื่องหมายมุมมองให้ตรวจสอบอย่างชัดเจนทุกครั้งที่มีการส่งค่า
<p>{{ data$ | async }}</p>ไลบรารีจากภายนอก
ไลบรารีบางตัวเคยสมมติว่า Zone.js จะตรวจจับโดยอัตโนมัติ ในโหมดไร้โซน คุณอาจต้องห่อหุ้ม callback ของไลบรารีเหล่านั้นเพื่ออัปเดต signal หรือเรียก markForCheck() ด้วยตนเอง
ประโยชน์
โหมดไร้โซนหมายถึงบันเดิลที่เล็กลง การเริ่มต้นที่เร็วขึ้น จังหวะการทำงานส่วนเกินที่คาดไม่ถึงน้อยลง และแบบจำลองทางความคิดที่ชัดเจนขึ้น: UI จะอัปเดตเมื่อสถานะที่คุณติดตามเปลี่ยนแปลงจริงเท่านั้น
สถานะการทดลอง
ผู้ให้บริการนี้มีชื่อว่า provideExperimentalZonelessChangeDetection เนื่องจาก API กำลังพัฒนาให้มีความเสถียร คุณสามารถนำไปใช้กับแอปใหม่ที่เน้น signals เป็นหลักได้ แต่ควรทดสอบอย่างละเอียด
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจของคุณเกี่ยวกับ Angular แบบไร้โซน
สรุปทบทวน
คุณได้เรียนรู้ว่า provideExperimentalZonelessChangeDetection() ทำให้ไม่จำเป็นต้องใช้ Zone.js โดยขับเคลื่อนการอัปเดตผ่าน signals เหตุการณ์ pipe async และ markForCheck() เพื่อให้แอปมีขนาดเล็กลง เร็วขึ้น และคาดเดาได้มากขึ้น
คำถามที่พบบ่อย
บทเรียน “Angular แบบไร้โซน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Angular แบบไร้โซน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Angular แบบไร้โซน”
เรียกใช้ Angular โดยไม่ใช้ Zone.js คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “Angular แบบไร้โซน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตรวจจับการเปลี่ยนแปลงทำงานอย่างไร
- การตรวจจับการเปลี่ยนแปลงแบบ OnPush
- Angular แบบไร้โซน
- การปรับประสิทธิภาพรายการและการเรนเดอร์