Как вызвать событие нажатия кнопки до размытия, используя угловой 6

Question

На моей странице у меня есть два элемента управления: текстовое поле и кнопка.

Сценарий: Всякий раз, когда пользователь щелкает вне текстовой области, я должен сохранить значение текстовой области. Если пользователь щелкнет значок отмены, данные не будут сохранены. Для этого я использовал следующий код:

<textarea id="sht-edt-{{Index}}-{{RecordIndex}}" autofocus kendoTextArea                                    
 (blur)="Save(Record.Model)" [autoSize]="true"
 #Model="ngModel" [required]="Required" [(ngModel)]="Record.Model"></textarea>

<button ng-mousedown="CloseEditMode(Index, RecordIndex)"><span class="icon-cross"></span></button>

Я использовал такие события, как: click, ng-mousedown и mousedown, но он всегда вызывает метод Save textarea. Как я могу вызвать метод CloseEditMode () перед методом Save ()?

Answer 1

Поскольку вы используете событие размытия для сохранения, оно всегда будет вызываться перед любым другим событием, когда вы щелкаете за пределами текстовой области. Если вы хотите сохранить размытие автоматически, но кнопка отмены отменяет сохранение, вам нужно будет добавить таймаут к сохранению. Попробуйте 100 или 200 миллисекунд для timeoutPeriod.

cancelled = false;

Save(model) {
  setTimeout(() => {
    if (!this.cancelled) {
      // save logic
    } else {
      // Close the modal
    }
  }, timeoutPeriod);
}

и установите отмененный на кнопке отмены

<button (click)="cancel = true"><span class="icon-cross">

Убедитесь, что для отмененного фокуса установлено значение false на фокусе

<textarea  (blur)="Save(Record.Model)" (focus)="cancelled = false"

Вот StackBlitz https://stackblitz.com/edit/angular-ecevqn

Answer 2

Отказ от ответственности: я не эксперт в angular.js.

При нажатии на кнопку отмены

• Текстовая область теряет фокус. Следовательно, метод сохранения будет называться
• CloseEditMode будет называться

Если вы хотите сместить приоритеты вызова события, либо

• Создать сохранениекнопка, которая записывает данные
• У метода сохранения есть обратный вызов в CloseEditMode

Надеюсь, это поможет