Question

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

非常感谢

Answer 1

您可以使用card_last_four的组件。

类似的东西：

@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 } }，因为您将遇到意外行为，因为每个实例都会对这些事件作出反应。

Answer 2

在更被动的方法中，我使用这个注入令牌：

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>
    ) {} 
}

Answer 3

找出这个doesn't work in services，这是我的要求。我的解决方案是“旧方法”：

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

不确定我是否以“正确”的方式完成了操作，但它在Chrome上可以正常使用。我不确定的是是否应该销毁事件监听器，以及它是否可以在其他浏览器中运行。让我知道我是否在无意中将自己射中了脚。如果需要，将更新答案，或根据需要将其删除。

Angular 2+ window.onfocus和windows.onblur

3 个答案: