如何获得对Angular 5组件中的window对象的引用

Question

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

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

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

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

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