当UiRouter路由改变时观察和显示通知的AngularJS组件

Posted 2021-04-06

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

我正在使用Angular 1.6，组件和UI路由器。我尝试了几种解决方案，但$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); });

一旦我能够检测到路线何时发生变化，我怎样才能阻止路线改变，以便我可以显示他的表格脏的通知？

答案

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

首先，我创建了一个名为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
    }