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

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

当有人离开页面时，我想在我的 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 事件处理程序的正确方法是什么？

解决方法

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
  }

,

onBlur 和 onFocus 不会直接应用于 div

无论如何，要解决您的问题，您只需在您的 EventListener 或任何其他组件的构造函数中的 visibilitychange 上添加一个 app.component。

document.addEventListener("visibilitychange",() => {
  if (document.hidden) {
    console.log("Browser tab is on blur")
  } else {
    console.log("Browser tab is on focus")
  }
});

,

两个问题将解决您的问题。将 tabindex="0" 添加到您的 DIV 然后处理以下事件

<!-- language: html -->
// 1
<div  (blur)="onBlur()">  // tabindex="0" gets inserted by HostBinding
// recommend you use an input vs. DIV when user is entering data

第二个问题是因为您的导航需要处理 two events happening。对于 Firefox，请查看 here 作为事件名称。导入 HostListener 和 HostBinding

后

<!-- language: typescript -->
// 2
import { Component,HostListener,HostBinding } from '@angular/core';

1. 处理 focus event 焦点和 blur 退出
2. 根据需要处理 blur event

---

<!-- language: typescript -->
// 3              -- you should be good :)
export class HotComponent { 

focusOutFunction() {
 console.log('focusOutFunction called');
 .. your logic here
 }

focusFunction() {
 console.log('focusFunction called');
 ..
 }

blurFunction()
 {
  console.log('blur called');
  ..
 }

   // you dont need to manually add it to HTML if you do this.
   @HostBinding('attr.tabindex') tabindex = '0';
}

---

另一个选项2：如果你想处理focusOut

  <!-- language: html -->
  <input tabindex="0" type="text" (focusout)="onFocusOutEvent($event)" />

---

  // in your component explicitly handle the event 
  onFocusOutEvent(event: any){
    console.log(event.target.value);
  }

一个 simple working sample 对我有用的事件，请参阅下面图片的控制台日志......它有效。能否请您禁用所有插件并尝试。

,

我建议您查看 onbeforeunload event。 onblur 事件并非真正旨在支持您的用例，因为它针对元素的状态更改。您尝试做的是拦截浏览器上的历史更改。

WindowEventHandlers mixin 的 onbeforeunload 属性是处理 beforeunload 事件的 EventHandler。当窗口即将卸载其资源时会触发这些事件。此时，文档仍然可见，事件仍然可以取消。

如其他回复所述，您可以添加事件侦听器 via Angular's @HostListener annotation：

@HostListener('window:beforeunload')
foo() {
  // Do something here
}