Путать с TS и Angular используя функцию setTimeoutFunction

Question

Я пробую что-то очень простое с Angular и TS для практики Ioni c. У меня есть простая кнопка, которая при нажатии изменяет текст, а затем через несколько секунд я хочу, чтобы этот текст снова изменился.

Я не понимаю, почему «this.text» не будет работать в зависимости от того, как истекло время ожидания. используется функция.

Это не работает. (this.text не определен)

export class HomePage {
  constructor() { }

  text = "Default";

  onChangeText() {
    this.text = "Changed!";
    setTimeout(
      this.onBackToDefault
      , 2000);
  }

  onBackToDefault() {
    this.text = "Default";
  }
}

Пока это работает

export class HomePage {
  constructor() { }

  text = "Default";

  onChangeText() {
    this.text = "Changed!";
    setTimeout(() => {
      this.onBackToDefault();
    }
      , 2000);
  }

  onBackToDefault() {
    this.text = "Default";
  }
}

Answer 1

Это потому, что this при использовании внутри функции относится к самой функции. При использовании в функции стрелки это относится к внешней области видимости.

В первом примере вы передаете всю функцию целиком, тогда как во втором примере вы используете функцию стрелки.

Первый пример также может быть написан от руки так:

onChangeText() {
  this.text = "Changed!";
  setTimeout(function () {
    this.onBackToDefault();
//       <------ 'this' is scoped to the anonymous function
  }, 2000);
}

Answer 2

setTimeout(
  this.onBackToDefault
, 2000);

В этом примере метод setTimeout знает только элементы, объявленные внутри него. Таким образом, все элементы, использующие this. , будут неопределенными.

вам нужно использовать setTimeout, используя pharanteses, чтобы использовать внешние параметры:

setTimeout(() => {    
// do stuff    
}, 2000);