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

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键。 但是我想显示确认警报并按“确定”按钮执行一些操作。

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

任何建议表示赞赏。

谢谢。

Answer 1

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

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