填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

NgZone

一種用於在 Angular Zone 內部或外部執行任務的可注入服務。

An injectable service for executing work inside or outside of the Angular zone.

檢視"說明"...

      
      class NgZone {
  static isInAngularZone(): boolean
  static assertInAngularZone(): void
  static assertNotInAngularZone(): void
  constructor(__0)
  hasPendingMacrotasks: boolean
  hasPendingMicrotasks: boolean
  isStable: boolean
  onUnstable: EventEmitter<any>
  onMicrotaskEmpty: EventEmitter<any>
  onStable: EventEmitter<any>
  onError: EventEmitter<any>
  run<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T
  runTask<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[], name?: string): T
  runGuarded<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T
  runOutsideAngular<T>(fn: (...args: any[]) => T): T
}
    

Provided in

說明

此服務最常見的用途是在啟動包含一個或多個不需要 Angular 處理的 UI 更新或錯誤處理的非同步任務的工作時優化效能。可以透過 runOutsideAngular 啟動此類別任務,如果需要,這些任務可以透過 run 重新進入 Angular zone。

The most common use of this service is to optimize performance when starting a work consisting of one or more asynchronous tasks that don't require UI updates or error handling to be handled by Angular. Such tasks can be kicked off via runOutsideAngular and if needed, these tasks can reenter the Angular zone via run.

Further information available in the Usage Notes...

靜態方法

      
      static isInAngularZone(): boolean
    
引數

沒有引數。

返回值

boolean

      
      static assertInAngularZone(): void
    
引數

沒有引數。

返回值

void

      
      static assertNotInAngularZone(): void
    
引數

沒有引數。

返回值

void

建構函式

      
      constructor(__0)
    
引數
__0

屬性

屬性說明
hasPendingMacrotasks: boolean唯讀
hasPendingMicrotasks: boolean唯讀
isStable: boolean唯讀

是否沒有未解決的微任務或巨集任務。

Whether there are no outstanding microtasks or macrotasks.

onUnstable: EventEmitter<any>唯讀

在程式碼進入 “Angular Zone ” 時通知。這首先在 VM 週期中觸發。

Notifies when code enters Angular Zone. This gets fired first on VM Turn.

onMicrotaskEmpty: EventEmitter<any>唯讀

在當前的 VM Turn 中沒有更多微任務排隊時通知。這是 Angular 進行變更檢測的提示,它可能會排隊更多的微任務。因此,此事件可在每次 VM 週期中觸發多次。

Notifies when there is no more microtasks enqueued in the current VM Turn. This is a hint for Angular to do change detection, which may enqueue more microtasks. For this reason this event can fire multiple times per VM Turn.

onStable: EventEmitter<any>唯讀

在最後一個 onMicrotaskEmpty 已執行並且沒有更多微任務時通知,這意味著我們將放棄 VM 週期。該事件只會被呼叫一次。

Notifies when the last onMicrotaskEmpty has run and there are no more microtasks, which implies we are about to relinquish VM turn. This event gets called just once.

onError: EventEmitter<any>唯讀

通知已傳遞的錯誤。

Notifies that an error has been delivered.

方法

在 Angular Zone 內同步執行的 fn 函式,並返回該函式返回的值。

Executes the fn function synchronously within the Angular zone and returns value returned by the function.

      
      run<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T
    
引數
fn (...args: any[]) => T
applyThis any
可選. 預設值是 `undefined`.
applyArgs any[]
可選. 預設值是 `undefined`.
返回值

T

透過 run 執行的函式可讓你從在 Angular Zone 之外執行的任務(通常透過 runOutsideAngular 啟動)重新進入 Angular Zone 。

Running functions via run allows you to reenter Angular zone from a task that was executed outside of the Angular zone (typically started via runOutsideAngular).

在此功能內計劃的任何將來的任務或微任務將在 Angular Zone 內繼續執行。

Any future tasks or microtasks scheduled from within this function will continue executing from within the Angular zone.

如果發生同步錯誤,它將被重新丟擲,並且不會透過 onError 報告。

If a synchronous error happens it will be rethrown and not reported via onError.

作為任務在 Angular Zone 中同步執行 fn 函式,並返回該函式返回的值。

Executes the fn function synchronously within the Angular zone as a task and returns value returned by the function.

      
      runTask<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[], name?: string): T
    
引數
fn (...args: any[]) => T
applyThis any
可選. 預設值是 `undefined`.
applyArgs any[]
可選. 預設值是 `undefined`.
name string
可選. 預設值是 `undefined`.
返回值

T

透過 run 執行的函式可讓你從在 Angular Zone 之外執行的任務(通常透過 runOutsideAngular 啟動)重新進入 Angular Zone 。

Running functions via run allows you to reenter Angular zone from a task that was executed outside of the Angular zone (typically started via runOutsideAngular).

在此功能內計劃的任何將來的任務或微任務都將在 Angular Zone 內繼續執行。

Any future tasks or microtasks scheduled from within this function will continue executing from within the Angular zone.

如果發生同步錯誤,它將被重新丟擲,並且不會透過 onError 報告。

If a synchronous error happens it will be rethrown and not reported via onError.

run 相同,但同步錯誤是透過 onError 捕獲並轉發的,而不是重新丟擲。

Same as run, except that synchronous errors are caught and forwarded via onError and not rethrown.

      
      runGuarded<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T
    
引數
fn (...args: any[]) => T
applyThis any
可選. 預設值是 `undefined`.
applyArgs any[]
可選. 預設值是 `undefined`.
返回值

T

在 Angular 的父 Zone 中同步執行 fn 函式,並返回該函式返回的值。

Executes the fn function synchronously in Angular's parent zone and returns value returned by the function.

      
      runOutsideAngular<T>(fn: (...args: any[]) => T): T
    
引數
fn (...args: any[]) => T
返回值

T

透過 runOutsideAngular 執行函式可讓你離開 Angular 的 Zone 並執行不會觸發 Angular 變更檢測或受 Angular 錯誤處理控制的工作。

Running functions via runOutsideAngular allows you to escape Angular's zone and do work that doesn't trigger Angular change-detection or is subject to Angular's error handling.

從此函式中計劃的任何將來的任務或微任務將在 Angular Zone 之外繼續執行。

Any future tasks or microtasks scheduled from within this function will continue executing from outside of the Angular zone.

使用 run 重新進入 Angular Zone 並執行更新應用程式模型的工作。

Use run to reenter the Angular zone and do work that updates the application model.

使用說明

例子

Example

      
      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();
    }
  }
}