Angular 2 - 关闭窗口时执行代码

typescript

在Angular 2中，有时我们需要在关闭窗口时执行一些代码。这可以是为了保存用户的工作，清理资源，或者执行其他必要的操作。幸运的是，Angular 2为我们提供了一种简单的方法来实现这一点。

使用window对象的beforeunload事件

在Angular 2中，我们可以使用window对象的beforeunload事件来捕获窗口关闭事件。beforeunload事件在窗口关闭之前触发，我们可以在这个事件的处理程序中执行我们的代码。

要使用beforeunload事件，我们首先需要在Angular组件中引入window对象。我们可以通过使用Angular的依赖注入机制来实现这一点。

首先，在组件的构造函数中注入window对象：

typescript
constructor(@Inject(WINDOW) private window: Window) { }

然后，我们可以在组件的ngOnInit生命周期钩子中订阅beforeunload事件：

typescript
ngOnInit() {
  this.window.addEventListener('beforeunload', () => {
    // 在这里执行你的代码
  });
}

现在，当用户关闭窗口时，我们注册的事件处理程序将被调用，并且我们可以在其中执行我们的代码。例如，我们可以保存用户的工作或执行其他必要的操作。

案例代码

下面是一个简单的示例，演示了如何在Angular 2中使用beforeunload事件来执行一些代码：

typescript
import { Component, Inject, OnInit } from '@angular/core';
import { WINDOW } from '@ng-toolkit/universal';
@Component({
  selector: 'app-my-component',
  template: <code>
    <h1>My Component</h1>
  </code>
})
export class MyComponent implements OnInit {
  constructor(@Inject(WINDOW) private window: Window) { }
  ngOnInit() {
    this.window.addEventListener('beforeunload', () => {
      // 在这里执行你的代码
      console.log('执行代码');
    });
  }
}

在这个例子中，当用户关闭窗口时，控制台将打印出"执行代码"。你可以根据你的需求在事件处理程序中执行任何代码。

在Angular 2中，我们可以使用beforeunload事件在关闭窗口时执行代码。通过使用window对象和beforeunload事件，我们可以轻松地捕获窗口关闭事件，并在其中执行我们的代码。这使我们能够保存用户的工作，清理资源，或者执行其他必要的操作。