如何在 Angular 2+ 中使用 HostListener 查找浏览器选项卡是否聚焦

Question

我想要使用 HostListener 的浏览器选项卡焦点和模糊事件。

Answer 1

首先在您的组件中导入 HostListener

import { HostListener } from '@angular/core';

然后把这段代码放到Tab Focus和Blur Event

export class AppComponent { 

   @HostListener('window:focus', ['$event'])
   onFocus(event: FocusEvent): void {

       // Do something      

   }

   @HostListener('window:blur', ['$event'])
   onBlur(event: FocusEvent): void {

      // Do something

   }

  ........
  .....
}