javascript - 如何在 Angular 中使用 zone.js？

Question

我想在我的 Angular 项目中使用 zone.js(而不仅仅是 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');});

如果我用 Zone 替换 żone，我得到这个:

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

如何从 Angular 导入和使用 zone.js？

Answer 1

Angular 有一个名为 ngZone 的 Zone.js 包装类。您可以像任何服务一样将它注入(inject)到您的组件中。

    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 自 v 0.6.0 以来已更改。关于运行beforeTask和afterTask，可以看看here , 但是，我调查了一下，找不到与 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 并希望在其中也具有相同的功能，那么您需要在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());
}