Angular (щелкните) вызовите функцию и потеряйте фокус

Question

Я использую bootstrap, у которого есть стиль кнопки, где, если я нажимаю кнопку и теряю фокус, он работает нормально. Мне нужно иметь возможность вызывать функцию, а затем терять фокус на кнопке при нажатии. Пример:

<button type="button" class="btn btn-primary btn-sm" 
    style ="background-color: black; margin-top: 0px; margin-bottom: 10px; position:relative;" (click)="save()">Save</button>

Как я могу добиться, чтобы сохранение было вызвано обратно в файл TS, который, конечно, работает, но затем сделать так, как будто я щелкаю что-нибудь еще на странице. Когда я меняю фокус, он делает то, что я хочу, и кнопка возвращается к обычному стилю. Есть ли способ сделать размытие или установить фокус на другой элемент et c только в событии (click) или другом событии, которое я могу использовать для this.blur() et c.?

Answer 1

Вы можете попробовать использовать ссылочную переменную шаблона и вызвать на ней функцию blur().

<button #button 
  type="button" 
  class="btn btn-primary btn-sm" 
  style ="background-color: black; margin-top: 0px; margin-bottom: 10px; position:relative;" 
  (click)="button.blur(); save()"
>
  Save
</button>

Здесь #button обозначает ссылочная переменная шаблона, и мы вызываем метод blur() в разделе обработчика перед вызовом обработчика save().