Merangkul Tanpa Zon dalam Sudut: Era Baharu Pengesanan Perubahan

Angular 18, dikeluarkan pada 22 Mei 2024, memperkenalkan pengubah permainan eksperimen: aplikasi Sudut tanpa zon. Ini menghapuskan pergantungan Zone.js, meningkatkan prestasi, mengurangkan overhed dan memudahkan penyahpepijatan. Mari kita mendalami aplikasi tanpa zon, kelebihannya dan cara mencuba ciri ini.

Memahami Pengesanan Perubahan Sudut (Pra-Zon)

Pengesanan perubahan memastikan DOM disegerakkan dengan data komponen. Sebelum ini, Angular bergantung pada Zone.js. Pengesanan perubahan dicetuskan dengan cara berikut:

• Interaksi Pengguna: Klik butang, input teks.
• Operasi Tak Segerak: Permintaan HTTP, setTimeout, setInterval, Resolusi Janji.
• Pencetus Manual: ApplicationRef.tick(), ChangeDetectorRef.detectChanges().

API penyemak imbas yang ditambal Zone.js, memberitahu Angular untuk memulakan pengesanan perubahan. Walaupun berkesan, ini menambah overhed dan kadangkala menyebabkan ExpressionChangedAfterItHasBeenCheckedError.

Contoh Pengesanan Tukar (Pra-Zon)

Sebelum pengesanan perubahan tanpa zon, Zone.js menguruskan kemas kini UI. Contoh StackBlitz ini menggambarkan:

1. Kemas Kini Harta Pengendali Acara: Satu klik butang mengemas kini kaunter. Zone.js memintas, menjadualkan perubahan pengesanan dan mengemas kini UI.
2. Kemas Kini Harta Tak Segerak: Selang waktu mengemas kini sifat. Zone.js mengesan operasi tak segerak dan mengemas kini UI.
3. Data HTTP (Array): Data yang diambil melalui HTTP disimpan dalam tatasusunan; Pengesanan perubahan lalai Angular mengemas kini paparan. Walau bagaimanapun, dengan ChangeDetectionStrategy.OnPush, mutasi tatasusunan langsung mungkin tidak mengemas kini paparan melainkan rujukan berubah atau pengesanan perubahan dicetuskan secara manual.
4. Data HTTP (Paip Async): AsyncPipe memudahkan pengendalian yang boleh diperhatikan, melanggan secara automatik dan mencetuskan pengesanan perubahan.
5. Data HTTP (Isyarat): Isyarat sudut (ciri moden) memberitahu pembaca yang bergantung secara langsung, memperkemas kemas kini secara bebas daripada Zone.js.

Contoh ini menyerlahkan peranan Zone.js dalam pengesanan perubahan, menetapkan peringkat untuk seni bina tanpa zon Angular yang dipertingkatkan.

Mengapa Memilih Tanpa Zon?

Mengalih keluar Zone.js menawarkan faedah yang ketara:

• Pengesanan Perubahan Ringkas: Kurang ExpressionChangedAfterItHasBeenCheckedError isu dan kerumitan berkaitan zon.
• Penurunan Overhed: Rangka kerja yang lebih ringan, meningkatkan prestasi.
• Penyahpepijatan Diperbaiki: Kawalan pengesanan perubahan yang lebih baik, pengenalan kesesakan prestasi yang lebih mudah.

Mengkonfigurasi Aplikasi Sudut Tanpa Zon

Bertukar kepada tanpa zon memerlukan perubahan konfigurasi:

1. Dayakan Pengesanan Perubahan Tanpa Zon: Dalam app.config.ts, tambah:

<code class="language-typescript">providers: [
  provideExperimentalZonelessChangeDetection()
]</code>

Alih keluar provideZoneChangeDetection() jika ada.

2. Alih Keluar Import Zon.js:

• Padam import '*zone.js'; daripada fail aplikasi anda.
• Dalam angular.json, alih keluar zone.js daripada tatasusunan polyfills:

<code class="language-json">"polyfills": []</code>

3. Nyahpasang Zone.js:

<code class="language-bash">npm uninstall zone.js</code>

Menguji Pengesanan Perubahan Tanpa Zon.js

Contoh ini menunjukkan pengesanan perubahan tanpa Zone.js:

Mari kita analisa setiap senario:

Senario 1: Kemas Kini Harta Pengendali Acara

Berfungsi seperti yang diharapkan.

Senario 2: Kemas Kini Harta Tak Segerak

Memerlukan this.changeDetectorRef.markForCheck(); atau menggunakan isyarat:

Versi yang diperbetulkan (dengan markForCheck):

Versi yang diperbetulkan (dengan isyarat):

Senario 3: Data HTTP (Array)

Paparan tidak dikemas kini secara automatik:

Versi yang diperbetulkan (dengan markForCheck):

Menggunakan async paip adalah diutamakan.

Senario 4: Data HTTP (Paip Async)

terus terang; gunakan paip async:

Senario 5: Data HTTP (Isyarat)

Gunakan toSignal() untuk menukar pemerhatian kepada isyarat:

Ringkasan:

• Pengendali Acara: Kemas kini UI dengan lancar.
• Operasi Tak Segerak: Memerlukan markForCheck() atau isyarat.
• HTTP (Boleh Diperhati): Gunakan paip async.
• Isyarat: Kemas kini UI automatik apabila isyarat berubah.

Kemas Kini Angular 19 (19 November 2025)

Angular 19 memperhalusi lagi sokongan aplikasi tanpa zon, menambah baik API, menambah sokongan pemaparan bahagian pelayan dan mempertingkatkan ujian. Angular CLI kini menyokong penciptaan projek tanpa zon:

<code class="language-typescript">providers: [
  provideExperimentalZonelessChangeDetection()
]</code>

Atas ialah kandungan terperinci Merangkul Tanpa Zon dalam Sudut: Era Baharu Pengesanan Perubahan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!