Question

我推迟用户输入以匹配用户输入，当我使用ngZone服务时，它会给我一个错误，如

core.es5.js:1084 ERROR TypeError: Cannot read property 'runOutsideAngular' of undefined
at questions-box.component.ts:111
at ZoneDelegate.webpackJsonp.754.ZoneDelegate.invokeTask (zone.js:398)
at Object.onInvokeTask (core.es5.js:4116)
at ZoneDelegate.webpackJsonp.754.ZoneDelegate.invokeTask (zone.js:397)
at Zone.webpackJsonp.754.Zone.runTask (zone.js:165)
at ZoneTask.invoke (zone.js:460)
at timer (zone.js:1540)

我已在我的组件中正确导入并注入ngZone服务

这是我的代码片段

onCategoryChange() {
this.categorySearchTemp = null;
this._timeout = null;
if (this._timeout) {
  window.clearTimeout(this._timeout);
}
this._timeout = window.setTimeout(function () {
  this._timeout = null;
  this.lc.runOutsideAngular(() => {
    this.lc.run(() => {
      console.log("VALUE", this.categorySearch);
       this.getCategory(this.categorySearch);
    });
  });

}, 1000);

}

Answer 1

使用＆＃34;胖箭＆＃34;保留＆＃34;这个＆＃34;

的功能

 window.setTimeout(function () {...}), 1000)

应改为

 window.setTimeout(()=> {...}), 1000)

以下是MDN所说的＆＃34;胖箭＆＃34; - ＆＃34;箭头函数表达式的语法比函数表达式短，并且不绑定它自己的this，arguments，super或new.target。＆＃34;

例如，

class A {

  callMeWithFatArrow() {
     setTimeout( () => {
        this.callThis();
    });
  }

  callMe() {
    setTimeout(function () {
        try {
            this.callThis();
        }
        catch (e) {
            alert('exception' + e);
        }
    });
  }

  callThis() {
    alert('i am here - callThis');
  }
}

let a = new A();
a.callMe();
a.callMeWithFatArrow();

callMe - 将警告异常，因为setTimeout使用一个设置自己的常规函数。

callMeWithFatArrow - 将能够在setTimeout中调用A类的另一个方法，因为在这种情况下，使用＆＃34;胖箭头＆＃34;没有自己设定这个。

NgZone在角度4

1 个答案: