如何在Angular项目里监听页面关闭、跳转事件？

在用户 *** 作网页时，我们有时需要监听用户关闭或者跳转网页的行为，比如像在线编辑工具，如果用户没有提交、保存就关闭页面，那一切更新的数据都会丢失，如何防止这一现象发生？本文提供了一种解决办法，但不是很友好，不得已而为之。

关于页面/浏览器关闭事件， onbeforeunload 依旧可行，不过如果使用者禁止了这一事件，那就改换别的办法吧。

关于页面跳转，也就是网址发生变化，如果要监听路由变化，有两种情况：

1.再写一个 onbeforeunload 事件，事件中什么都不放置，可以让用户保存之后触发此事件；

2.将 $locationChangeStart 或者 $stateChangeStart 事件放在一个全局变量中，比如vm.stopListener，之后在用户触发的事件中调用一次vm.stopListener()即可。

EventEmitter的一个典型应用就是父组件监听子组件的事件。

子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits(向上d射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。

即：

子组件发射-父组件接收-响应

子组件的eventEmitter是一个输出属性， 通常带有@output()装饰器。

子组件：

父组件绑定并响应：

通过子组件的引用，在组件引用上面绑定：(eventEmitter)="模板表达式"，就像响应(click)事件一样。

这个例子里面绑定：

angular 把事件参数用$event 传递给父组件中的处理方法。

---