NgZone не работает должным образом в угловых 4

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

Используйте функцию "толстая стрелка", чтобы сохранить "это"

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

следует изменить на

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

Вот что MDN говорит о "толстой стрелке": "У выражения функции стрелки более короткий синтаксис, чем у выражения функции, и он не привязывает свой собственный this, arguments, super или new.target".

Например,

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 использует обычную функцию, которая устанавливает свою собственную this.

callMeWithFatArrow - сможет вызывать другой метод класса A внутри setTimeout, потому что setTimeout в этом случае использует "жирную стрелку", которая не устанавливает свое собственное this.