Angular 2+中的window.onfocus和windows.onblur

Question

我需要在 Angular 2 或 4 中管理应用程序的浏览器选项卡是否聚焦。有没有办法使用 window.onfocus 和 window.onblur ?

非常感谢。

- Ali Briceño

Answer 1

你可以使用带有@HostListener的组件。 类似这样：

@Component({})
export class WindowComponent {

constructor(){}

    @HostListener('window:focus', ['$event'])
    onFocus(event: any): void {
        // Do something
    }

    @HostListener('window:blur', ['$event'])
    onBlur(event: any): void {
        // Do something
    }

}

请确保您没有同时运行多个WindowComponent，因为这将导致意外行为，因为每个实例都会对这些事件做出反应。

- dlcardozo

---

感谢您抽出时间来，我的朋友。我有一个问题...我如何在组件内使用它？我需要使用订阅吗？ - Ali Briceño

不用客气，您无需使用订阅功能，Angular 会在组件销毁时自动移除监听器，并且 onFocus 函数将在浏览器触发 window.onfocus 时被触发，blur 同理。 - dlcardozo

Answer 2

原来这个方法在服务中不起作用，而我需要它。我的解决方案是"老方法":

@Injectable()
export class WindowService {
    constructor(){
        window.addEventListener('focus', event => {
            console.log(event);
        });
        window.addEventListener('blur', event => {
            console.log(event);
        });
    }
}

我不确定我是否以“正确”的方式完成了它，但它在Chrome上运行。我不确定的是是否应该销毁事件监听器，以及它在其他浏览器中是否有效。如果我无意中自毁长城，请告诉我。如果有必要，我将更新答案或删除它。

- André C. Andersen

Answer 3

在更加响应式的方法中，我使用这个注入令牌：

export const WINDOW_FOCUS = new InjectionToken<Observable<boolean>>(
    'Shared Observable based on `window focus/blurred events`',
    {
        factory: () => {    
            return merge(fromEvent(window, 'focus'), fromEvent(window, 'blur')).pipe(
                startWith(null),
                map(() => window.document.hasFocus()),
                distinctUntilChanged(),
                share(),
            );
        },
    },
);

理想情况下，您不希望依赖全局的windows变量，您可以使用从 https://github.com/ng-web-apis/common 注入WINDOW和DOCUMENT令牌来替换它。

要使用WINDOW_FOCUS注入令牌，在任何组件或服务中，可以像这样将其添加到构造函数中：

@Injectable()
export class SomeService {
    constructor(
        @Inject(WINDOW_FOCUS) private readonly windowFocus$: Observable<boolean>
    ) {} 
}

- schmkr