Вы когда-нибудь оказывались в ситуации, когда ваше приложение постоянно инициирует обнаружение изменений, даже когда этого не должно быть? Возможно, у вас есть сторонняя библиотека, которая запускает события, которые вам не нужны, или, может быть, вы получаете огромное количество данных с сервера, из-за чего ваш пользовательский интерфейс тормозит. В подобных ситуациях вы можете настроить Zone.js на игнорирование определенных событий, чтобы оптимизировать производительность вашего приложения.

Как разработчики, мы всегда ищем способы оптимизировать наш код и сделать наши приложения более быстрыми и эффективными. Один из способов добиться этого в Angular — использовать Zone.js для оптимизации обнаружения изменений.

Однако иногда мы можем столкнуться с ситуациями, когда мы хотим игнорировать определенные события или действия в нашем приложении.

В этом блоге мы рассмотрим, как настроить Zone.js для игнорирования определенных событий.

Во-первых, давайте разберемся, как работает Zone.js. Zone.js — это контекст выполнения для приложений JavaScript, который позволяет нам перехватывать и отслеживать асинхронные операции, такие как события таймера, запросы XHR и многое другое. Перехватывая эти события, Zone.js может оптимизировать обнаружение изменений, запуская его только при необходимости, уменьшая количество проверок обновлений нашим приложением.

Чтобы настроить Zone.js для игнорирования определенных событий, мы можем использовать параметры blackList и ignoreCertainEvents. Опция blackList позволяет указать список имен событий, которые мы хотим игнорировать.

Параметр ignoreCertainEvents позволяет нам указать функцию, которая будет вызываться для каждого события, и мы можем использовать эту функцию, чтобы определить, следует ли игнорировать событие или нет.

Вот пример того, как мы можем настроить Zone.js для игнорирования определенных событий:

import { Component, NgZone, EventEmitter } from '@angular/core';
import 'zone.js';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="emitEvent()">Emit Event</button>
  `,
})
export class AppComponent {
  constructor(private zone: NgZone) {
    Zone.current.fork({
      name: 'My Zone',
      blackList: ['mousemove', 'scroll'],
      ignoreCertainEvents: (event: Event) => {
        return event instanceof EventEmitter;
      }
    }).run(() => {
      console.log('Running code in My Zone...');
    });
  }

  emitEvent() {
    const event = new EventEmitter();
    event.emit();
  }
}

В этом примере мы создаем новую зону под названием «Моя зона» и настраиваем ее на игнорирование событий 'mousemove' и 'scroll' с помощью параметра blackList. Мы также настраиваем его для игнорирования любых событий, которые являются экземплярами класса EventEmitter, используя параметр ignoreCertainEvents.

В конструкторе нашего компонента мы используем Zone.current.fork() для создания новой зоны и настройки ее с помощью параметров blackList и ignoreCertainEvents. Затем мы используем метод run() для запуска некоторого кода в нашей новой зоне.

В методе emitEvent() мы создаем новый экземпляр класса EventEmitter и генерируем событие. Поскольку мы настроили нашу зону для игнорирования событий, которые являются экземплярами класса EventEmitter, это событие будет игнорироваться и не будет запускать обнаружение изменений или обработку ошибок.

Используя параметры blackList и ignoreCertainEvents, мы можем настроить Zone.js для игнорирования определенных событий в наших приложениях Angular. Это может помочь нам оптимизировать обнаружение изменений и повысить производительность наших приложений.

Другой простой обходной путь будет для всего приложения

  1. Создайте новый файл, zone-flag.ts на том же уровне, что и polyfills.ts.
  2. Добавьте (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['mousemove']; в zone-flag.ts:
// in zone-flag.ts
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['mousemove'];

3. Добавьте import './zone-flag' к polyfills.ts:

// in polyfills.ts
import './zone-flag';
import 'zone.js/dist/zone'; // Included with Angular CLI.

Спасибо за прочтение

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .