表单在Angular 7 / UI-Router中发生未保存的更改时阻止用户导航

Question

我有一个使用UI-Router进行路由的Angular 7应用程序，该应用程序具有用户填写的Angular反应形式。 当此表单有未保存的更改时，如何防止用户离开？

在Angular Router中，有guards的概念，您可以用来在视图中的组件中检查“ unsavedChanges”布尔值，并确认用户是否想离开。 UI-Router不使用防护，而是使用在状态加载之前和之后运行的“挂钩”。这些挂钩会返回承诺，如果承诺返回false，则过渡不会发生。

在Angular 7 / UI-Router中是否有一种很好的方法来检查组件中的表单是否存在未保存的更改，如果可以，则阻止导航（内部路由器和外部）？关于如何做到这一点，我有一些理论，但是可能会有更好的方法：

1. 检查UnsavedChangesService，以查看是否已设置 unsavedChanges布尔值转换为true。问题：我不知道该如何获取 从UI-Router挂钩内部引用任意服务。
2. 检查在状态定义中指定的$default布尔值。{strong}问题：我不知道如何获得对组件 instance 。

有没有很好的方法可以做到这一点？似乎有很多针对Angular Router的解决方案，但是有关UI-Router的所有建议都是针对老式AngularJS的。

这是我一直在玩的一个示例挂钩，试图获取对组件或服务的某种引用。我什至可能走错了路。

unsavedChanges