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

Posted 2023-03-13

【中文标题】AngularJS 组件在 UiRouter 路由更改时监视和显示通知

【英文标题】：AngularJS Component to Watch and Display Notification when UiRouter Route Changes

【发布时间】：2018-06-12 12:34:28

【问题描述】：

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

我正在使用 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); );

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

【问题讨论】：

你用的是什么版本的ui-router？如果是 1.0+，您可以使用 uiCanExit 挂钩。 github.com/ui-router/sample-app-angularjs/blob/…

【参考方案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
    

【讨论】：

如果我检测到表单脏了，我将如何停止路由更改？检测表单是否脏的逻辑位于组件内。我从运行块访问此逻辑的最佳方式是什么？

对不起。我添加了一些额外的细节。

谢谢迈克。很好奇，有什么方法可以让我在组件控制器中监听并防止路由更改？

我修改了我的答案。我需要为我的应用程序实现这一点。我相信这可以通过全局钩子更清晰地完成，因为基本上关键是 trafficCop 服务并在必要时设置 currentController。