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

Question

我的页面上有两个组件：导航组件和表单组件。如果表单脏了，我想通知用户他们是否离开页面(通过单击导航组件或按浏览器"后退"按钮(。我已经实施了脏检查，但我不知道如何实施通知。

我正在使用Angular 1.6，Components和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
    }