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

Question

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

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
  }