Angular 2+ window.onfocus и windows.onblur

Поэтому мне нужно в Angular 2 или 4 управлять, когда сфокусирован вкладка браузера моего приложения или нет. Можно ли использовать window.onfocus и window.onblur?

Спасибо большое

Ответ 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, запущенных одновременно, потому что у вас будет непредвиденное поведение, так как каждый экземпляр будет реагировать на эти события.

Ответ 2

Оказывается, это не работает в службах, что было моим требованием. Мое решение делало это "по-старому":

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

Не уверен, что я сделал это "правильным" способом, но он работает на Chrome. В чем я не уверен, так это в том, должен ли я уничтожить прослушиватель событий или нет, и работает ли он в других браузерах. Дайте мне знать, если я случайно застрелюсь в ногу здесь. Обновит ответ, если так, или удалит его, если это будет необходимо.