Как использовать zone.js в Angular?

Question

Я бы хотел использовать zone.js в своем проекте Angular (не только функцию runOutsideAngularZone).

Я пытался включить его так:

import { zone } from 'zone.js';

К сожалению, я получаю эту ошибку:

error TS2306: File 'C:/projects/MyApp/node_modules/zone.js/dist/zone.js.d.ts' is not a module.

Затем я удалил { zone } часть:

import 'zone.js';

Но теперь я получаю эту ошибку:

error TS2552: Cannot find name 'zone'. Did you mean 'Zone'?

Мой код такой:

    let myZoneSpec = {
        beforeTask: function () {
            console.log('Before task');
        },
        afterTask: function () {
            console.log('After task');
        }
    };
    let myZone = zone.fork(myZoneSpec);
    myZone.run(() => {console.log('Task');});

Если я заменю żone на Zone, я получу это:

error TS2339: Property 'fork' does not exist on type 'ZoneType'.

Как я могу импортировать и использовать zone.js из Angular?

Answer 1

Angular имеет класс-оболочку для Zone.js с именем ngZone .Вы можете внедрить его в свой компонент как любой сервис.

    constructor(private zone: NgZone) { 
       this.zone.run(() => { console.log('This is zone'});
     }

Однако при таком подходе мы не можем использовать полную функциональность zone.js .Для этого мы должны объявить:

declare let Zone: any;
public class MyComponent {
  constructor() {
        Zone.current.fork({
            name: 'myZone'
          }).run(() => {
            console.log('in myzone? ', Zone.current.name);
          });
    }
}

Кроме того, API изменились с версии 0.6.0.Для запуска beforeTask и afterTask вы можете посмотреть здесь здесь , однако я посмотрел на него и не смог найти ничего, связанного с beforeTask и afterTask .

Обновлено
Для выполнения beforeTask и afterTask , вот как это возможно в новом API.

constructor() {
    const parentZone = new Zone();
    const childZone = parentZone.fork({
      name: 'child',
      onInvoke: (...args) => { 
                 console.log('invoked\n', args);
                 const valueToReturn = args[3](); // Run the function provided in the Zone.run
                 console.log('after callback is run');
                 return valueToReturn;
              }
    });
   console.log(childZone.run(() => {console.log('from run'); return 'from child run';}));

}

ПРИМЕЧАНИЕ:
Если вы хотите создать scheduleMicroTask и хотите иметь в нем те же функции, то вам нужно будет внедрить onInvokeTask и / или onScheduleTask в ZoneSpec (внутри parentZone.fork ()).

constructor() {
   const parentZone = new Zone();
    const childZone = parentZone.fork({
      name: 'child',
      onScheduleTask: (...args) => {
        console.log('task schedule...\n', args);
        return args[3];
      },
      onInvokeTask: (...args) => {
        console.log('task invoke...\n', args);
        return args[3].callback();
      }
    });

    const microTask = childZone
                      .scheduleMicroTask(
                        'myAwesomeMicroTask',
                        () => { 
                                console.log('microTask is running'); 
                                return 'value returned from microTask'; 
                            } );
    console.log(microTask.invoke());
}

Answer 2

Я настоятельно рекомендую вам использовать NgZone с Angular. Документация здесь