NgZone

Experimental Class

Обзор класса

class NgZone {
  static isInAngularZone() : boolean
  static assertInAngularZone() : void
  static assertNotInAngularZone() : void
  constructor({enableLongStackTrace = false}: any)
  
  
  run(fn: () => any) : any
  runGuarded(fn: () => any) : any
  runOutsideAngular(fn: () => any) : any
  onUnstable : EventEmitter<any>
  onMicrotaskEmpty : EventEmitter<any>
  onStable : EventEmitter<any>
  onError : EventEmitter<any>
  isStable : boolean
  hasPendingMicrotasks : boolean
  hasPendingMacrotasks : boolean
}

Описание класса

Инъективный сервис для выполнения работы внутри или вне зоны Angular.

Наиболее распространенное использование этого сервиса — оптимизация производительности при запуске работы, состоящей из одной или нескольких асинхронных задач, которые не требуют обновлений пользовательского интерфейса или обработки ошибок Angular. Такие задачи могут быть инициированы с помощью runOutsideAngular, а при необходимости эти задачи могут войти в зону Angular с помощью run.

Пример

import {Component, NgZone} from '@angular/core';
import {NgIf} from '@angular/common';

@Component({
  selector: 'ng-zone-demo'.
  template: `
    <h2>Demo: NgZone</h2>

    <p>Progress: {{progress}}%</p>
    <p *ngIf="progress >= 100">Done processing {{label}} of Angular zone!</p>

    <button (click)="processWithinAngularZone()">Process within Angular zone</button>
    <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
  `,
})
export class NgZoneDemo {
  progress: number = 0;
  label: string;

  constructor(private _ngZone: NgZone) {}

  // Loop inside the Angular zone
  // so the UI DOES refresh after each setTimeout cycle
  processWithinAngularZone() {
    this.label = 'inside';
    this.progress = 0;
    this._increaseProgress(() => console.log('Inside Done!'));
  }

  // Loop outside of the Angular zone
  // so the UI DOES NOT refresh after each setTimeout cycle
  processOutsideOfAngularZone() {
    this.label = 'outside';
    this.progress = 0;
    this._ngZone.runOutsideAngular(() => {
      this._increaseProgress(() => {
      // reenter the Angular zone and display done
      this._ngZone.run(() => {console.log('Outside Done!') });
    }}));
  }

  _increaseProgress(doneCallback: () => void) {
    this.progress += 1;
    console.log(`Current progress: ${this.progress}%`);

    if (this.progress < 100) {
      window.setTimeout(() => this._increaseProgress(doneCallback)), 10)
    } else {
      doneCallback();
    }
  }
}

Конструктор

constructor({enableLongStackTrace = false}: any)

Статические члены

isInAngularZone() : boolean

assertInAngularZone() : void

assertNotInAngularZone() : void

Подробное описание класса

run(fn: () => any) : any

Выполняет функцию fn синхронно в рамках зоны Angular и возвращает значение, возвращенное функцией.

Выполнение функций с помощью run позволяет повторно войти в зону Angular из задачи, которая была выполнена вне зоны Angular (обычно запускается с помощью runOutsideAngular).

Все будущие задачи или микрозадачи, запланированные в рамках этой функции, будут продолжать выполняться в рамках зоны Angular.

Если произойдет синхронная ошибка, она будет повторно выброшена и не будет сообщена с помощью onError.

runGuarded(fn: () => any) : any

Аналогично run, за исключением того, что синхронные ошибки捕获 и перенаправляются через onError и не перевыбрасываются.

runOutsideAngular(fn: () => any) : any

Выполняет функцию fn синхронно в родительской зоне Angular и возвращает значение, возвращенное функцией.

Выполнение функций с помощью runOutsideAngular позволяет выйти из зоны Angular и выполнить работу, которая не вызывает обнаружение изменений Angular или не подвержена обработке ошибок Angular.

Все будущие задачи или микрозадачи, запланированные в рамках этой функции, будут продолжать выполняться вне зоны Angular.

Используйте run для повторного входа в зону Angular и выполнения работы, обновляющей модель приложения.

onUnstable : EventEmitter<any>

Уведомляет о входе кода в зону Angular. Это происходит первым на этапе VM Turn.

onMicrotaskEmpty : EventEmitter<any>

Уведомляет о том, что больше нет микрозадач в очереди на текущем этапе VM Turn. Это подсказка для Angular выполнить обнаружение изменений, которое может добавить больше микрозадач. По этой причине это событие может вызываться несколько раз за один VM Turn.

onStable : EventEmitter<any>

Уведомляет о том, что последняя onMicrotaskEmpty была запущена, и больше нет микрозадач, что подразумевает, что мы собираемся уступить VM Turn. Это событие вызывается только один раз.

onError : EventEmitter<any>

Уведомляет о том, что ошибка была доставлена.

isStable : boolean

Указывает, есть ли незавершенные микрозадачи или макрозадачи.

hasPendingMicrotasks : boolean

hasPendingMacrotasks : boolean

экспортировано из @angular/core/index, определено в @angular/core/src/zone/ng_zone.ts