AngularJS 组件在 UiRouter 路由更改时监视和显示通知

Question

我的页面上有两个组件：导航组件和表单组件。如果表单脏了，我想通知用户是否离开页面（通过单击导航组件或按下浏览器的“返回”按钮）。我已经实现了脏检查，但我不知道如何实现通知。

我正在使用 Angular 1.6、组件和 UI-Router。我尝试了几种解决方案，但 $log 没有被触发。

$scope.$on('$stateChangeStart',     e => { $log.log(e); });
$scope.$on('$routeChangeStart',     e => { $log.log(e); });
$rootScope.$on('$stateChangeStart', e => { $log.log(e); });
$rootScope.$on('$routeChangeStart', e => { $log.log(e); });

一旦我能够检测到路线何时发生变化，我将如何防止路线发生变化，以便显示我的通知，告知其表单已脏？

Answer 1

我也需要为我的应用程序这样做。我相信我会改进它，但这就是我所做的。

首先，我创建了一个名为 trafficCop 的服务，如下所示：

(() => {    
    class trafficCop {
        constructor() {
            this.currentController = undefined
        }

        register(currentController) {
            if (currentController) {
                this.currentController=currentController
            } else {
                this.currentController = undefined
            }
        }   

        allowExit(promise) {
            if (angular.isObject(this.currentController)) {
                if (!this.currentController.allowExit()) {
                    return promise.reject()
                }
            }
            return true
        }   

    }
    angular.module('myApp').service("trafficCop", trafficCop)
})()    

然后在我的所有状态中，我添加了一个看起来像这样的解决方案：

(() => {
    angular.module('myApp')
        .config(($stateProvider) => {
            $stateProvider.state('orders', {
                    url: "/orders",
                    component: "orderHistory",
                    role: "order history",
                    resolve: {
                        onEnter: (trafficCop,$q) => trafficCop.allowExit($q)
                    }
                })
        })
})()

然后在我不想在脏时退出的任何组件控制器中，我将 trafficCop 注入构造函数并将其存储到 this.trafficCop 并添加如下代码：

    $postLink() {
        this.trafficCop.register(this)
    }
    $onDestroy() {
        this.trafficCop.register()
    }
    allowExit() {
        // code to determine if the user can leave goes here.
        return false
    }