angular - 在 Angular 9 中，如何为页面实现 onblur 处理程序？

Question

我想在我的 Angular 9 应用程序中设置一个 onblur 事件处理程序，以便在有人离开页面时使用。我的相关页面被映射到具有以下内容的单个组件...

export class HotComponent implements OnInit {
  ...

  onBlur(): void {
    console.log("on blur called !!!");
  }

在模板中，我设置了这个...

<div (blur)="onBlur()">
  <div>
    ...
  </div>
</div>

但是当我离开加载此页面的浏览器窗口并返回时，我注意到 onblur 处理程序尚未被调用。在 Angular 9 中为页面实现 onblur 事件处理程序的正确方法是什么？

Answer 1

Angular 有一个叫做 HostListener 的东西，你需要使用它!

 /**
   * Blur
   * @param eventName 'focusout' is the key
   * @param arguments of type '$event'
   */
  @HostListener('focusout', ['$event'])
  onFocusout(event) {
    // your logic goes here
    console.log('on blur called'); // This will get printed on blur
  }