angular.js ui-router 如何在拒绝后捕获参数的路由或 url？

Question

我想捕获 url 参数或路由或当状态被拒绝时：

定义状态

app.config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('categories', {
  url: '/categories',
  templateUrl: 'categories/views/index.html',
  resolve: {
   loadRoute: app.loadRoute
  }
 });
}
]);

定义解析事件，默认拒绝

app.loadRoute = function ($q, $timeout) {
var deferred = $q.defer();
$timeout(deferred.reject);

return deferred.promise;
};

并运行 init 捕获错误拒绝

app.run(['$rootScope', function($rootScope) {
 $rootScope.$on('$stateChangeError',
  function(event, toState, toParams, fromState, fromParams) {       
//.....
  });
}]);

如果我的网址是例如 /categories?param=1&paramtwo=2 我想在验证时继续此网址

如何处理这个 url？ 事件拒绝

Answer 1

我有几点建议：

• 首先，看看ui-router documentation for state change events。
• 使用观察者的参数获取状态 URL 和参数。
• 在观察程序中使用 error 参数来检查不同的错误。
• 将您的电话转至deferred.reject()

---

1。获取 URL 和参数

• 您不需要使用$location。
• 由于您使用的是 ui-router，您可以通过 toState.url 和 toParams 获取它们。

---

2。在$stateChangeError 中使用error 参数

您可以像这样向 $stateChangeError 事件观察器添加 error 参数：

$rootScope.$on('$stateChangeError', 
function(event, toState, toParams, fromState, fromParams, error){ ... })

正如文档所说，

请务必注意，如果您的 resolve functions 中有任何错误（javascript 错误、不存在的服务等），它们不会按照传统方式抛出。您必须侦听此 $stateChangeError 事件以捕获所有错误。使用event.preventDefault() 防止 $UrlRouter 将 URL 还原到以前的有效位置（在 URL 导航的情况下）。

---

3。致电deferred.reject()

• 更重要的是，您在$timeout(deferred.reject); 中对deferred.reject 的调用不是函数调用。
• 应该是deferred.reject() -（别忘了括号）

---

4。示例

这是一个示例，它在一秒钟后拒绝承诺，错误为'TEST_ERROR'。观察者记录该错误、预期的状态 URL 以及触发错误时的参数。

决心：

  resolve: {
    errorObj: function($q, $timeout) {
      var deferred = $q.defer();
      $timeout(function() {
        deferred.reject("TEST_ERROR");
      }, 1000);
      return deferred.promise;
    }
  }

观察者：

$rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
  event.preventDefault();
  if (error === "TEST_ERROR") {
    console.log("ERROR:", error, "URL:", toState.url, "PARAMS:", toParams);
  }
});

Answer 2

我们可以使用$location 服务。有a working demo

.run(['$rootScope', '$state', '$location',

  function ($rootScope, $state, $location) {
    $rootScope.$on('$stateChangeError', 

    function(event, toState, toParams, fromState, fromParams){
      console.log($location.url())
    });

}])

文档引用：

url([url]);

这个方法是getter/setter。
在没有任何参数的情况下调用时返回 url（例如 /path?a=b#hash）。
使用参数调用并返回 $location 时更改路径、搜索和哈希。

// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var url = $location.url();
// => "/some/path?foo=bar&baz=xoxo"

工作演示显示状态定义为：

  .state('rejected', {
      url: "/rejected{any:.*}",
      templateUrl: 'tpl.html',
      resolve: {
        loadRoute: ['Loader', function(Loader){
          return Load.load()
        }]
      }
  })

当这样导航时：

<a href="#/rejected?par1=x&amp;para2=y">
<a href="#/rejected/other">

将登录控制台

/rejected?par1=x&para2=y
/rejected/other

查看demo here