Angular：处理浏览器刷新/关闭事件

Question

在我的 Angular4 应用程序中，我想处理浏览器刷新事件。刷新时我想弹出确认警报，一旦按下 OK 想要做一些动作（调用一些 api 调用）。我在下面试过了。

    // imports'

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      @HostListener("window:beforeunload", ["$event"]) unloadHandler(event: Event) {
        console.log("Processing beforeunload...");
        event.returnValue = true;
      }

      constructor() {
      }

    }

现在我可以按下键盘上的 F5。但我想显示确认警报并在按下 OK 按钮时执行一些操作。

我想从用户那里弹出自定义对话框询问一些事情（例如：'这将释放您打开的每个预订的锁定。您要继续吗？'）一旦用户单击“确定”按钮想要调用一些 api 调用。

欢迎提出任何建议。

谢谢。

Answer 1

显示“您所做的更改可能无法保存”对话框是这种情况下 Web 浏览器允许的唯一操作，因此无法执行任何进一步的操作。

使用 Internet Explorer，您可以将 event.returnValue 设置为字符串值，该字符串将显示给用户，以鼓励他们不要重新加载/离开，但 Chrome 会忽略这一点并始终显示相同的消息。