如何在 Angular 5 组件中获取对窗口对象的引用

Question

我是 Angular 版本 5 的新手，并参考了以下文章：

https://juristr.com/blog/2016/09/ng2-get-window-ref/

我正在尝试同时访问 window.onbeforeunload 和 window.onfocus

我已经完成了这篇文章并创建了一个新服务，但现在在我需要访问window.onbeforeunload 和window.onfocus 的实际组件中，我不确定如何合并以下功能：

window.onbeforeunload = function(){
  userWantsToLeave = true;
  console.log("onbeforeunload: ",userWantsToLeave);
};

window.onfocus = function() {
  if(userWantsToLeave) {
    userWantsToLeave = false;
    console.log("onfocus: ",userWantsToLeave);
  }
}

使用附件中的文章，我可以在我的组件中的哪个位置同时实现上述两个功能？

我只需要能够在我的组件中访问这两个窗口函数。

Answer 1

你可以像这样使用HostListener。

import { Component , HostListener } from '@angular/core';
export class AppComponent {
    @HostListener('window:beforeunload', ['$event'])
    doSomething($event) {
        /// code
    }

    @HostListener('window:focus', ['$event'])
    dofocus($event) {
        /// code
    }
    constructor() {}
}