Угловой установщик не вызывается с тем же значением

Question

У меня очень простая форма (с тремя полями), которая обновляет конфигурацию. Когда я нажимаю кнопку обновления, я хочу, чтобы сообщение об успехе отображалось и исчезало через 5 секунд. После нажатия кнопки «Отправить» (конфигурация обновлена), если форма передается повторно до исчезновения предыдущего сообщения, я хочу, чтобы предыдущие 5 секунд игнорировались, а сообщение об успешном выполнении оставалось в течение следующих 5 секунд.

Я пытался добиться этого с помощью:

<div *ngIf="message">
  {{ message }}
</div>

А:

_message: string;
_timeout: number;

get message() {
  return this._message;
}

@Input()
set message(value: string) {
  if (value) {
    if (this._timeout) {
      clearTimeout(this._timeout);
    }
    this._timeout = setTimeout(function() {
      this.message = null;
    }.bind(this), 5000);
  }
  this._message = value;
}

Я настраиваю сообщение после нажатия кнопки отправки. Таким образом, сообщение отображается и исчезает через 5 секунд. Но метод set не вызывается, когда я пытаюсь обновить конфигурацию снова, потому что сообщение всегда одинаковое - «Успех». Есть идеи как этого добиться?

Answer 1

Проблема связана с механизмом обнаружения угловых изменений. При втором отправлении, если нет изменений, форма все еще помечается как нетронутая, и отправка не имеет никакого эффекта.

Решение состоит в том, чтобы добавить прослушиватель щелчков, который явно вызывает функцию для установки сообщения.

<input type="submit" (click)="displayMessage()" />

Answer 2

Пожалуйста, проверьте этот код. Я не уверен в проверке очищенного _timeout с "если".

_message : string; _timeout: number;   

get message() {
  return this._message;
}

@Input()
set message(value: string) {
  if (value && this._timeout == -1) {        
    this._timeout = setTimeout(function () {
      clearTimeout(this._timeout);
      this.message = null;
    }.bind(this), 5000);

    this._message = value;
  }
}