Чому без зон?
- Покращена продуктивність: Zone.js виконує перевірку змін і повторно рендерить подання більше разів, ніж потрібно. Адже зона насправді не знає, що саме змінилося.
- Менший розмір пакету: Оскільки код, пов'язаний з zone.js, видаляється з фінального пакету.
- Швидше завантаження додатку: Немає потреби завантажувати zone.js.
- Більше не буде помилки "Expression changed after it is checked".
Ми розглянемо наступне.
- Код Angular з використанням zone.js.
- Як перейти на режим без зон.
- Як Angular поводиться без
zone.js. - Як знову зробити код функціональним.
Код Angular з zone.js.
Для початку перевіримо, чи є у нас залежність zone.js. Спробуйте вивести Zone у вашій консолі.
Простий лічильник:
//HTML
Counter: {{ counter }}
Increment //TS counter = 0; incrementCounter() { this.counter += 1; } ```  **Просте асинхронне встановлення властивості через setInterval:** ``` //HTML
Simple property set asynchronously
Tick: {{ tick }}
//TS tick = 0; setInterval(() => { this.tick += 1; },1000); ```  {
{{ member.name }}
} //TS members = []; this.getData().subscribe( m => this.members = m ); getData() { return this.http.get("https://jsonplaceholder.typicode.com/users") } ```  **Дані, отримані через HTTP з async pipe:** ``` //HTML
{{ member.name }}
//TS members$ = this.getData(); getData() { return this.http.get("https://jsonplaceholder.typicode.com/users") } ```  **Використання сигналів замість markForCheck:** Коли подання читає сигнал, Angular реєструє сигнал як залежність подання.
Коли сигнал змінюється, подання отримує сповіщення і оновлює змінене значення.
//HTML
Simple property set asynchronously using signal
Tick: {{ tick() }}
//TS tick = signal(0); setInterval(() => { this.tick.update(c => c += 1); },1000); ``` , щоб дізнатися більше про Angular та JS!
Перекладено з: Making Angular Application Zoneless