28

我定义了一些路线：

angular.module('myApp', [])
  .config('$routeProvider', function($routeProvider) {
    $routeProvider.when('/aaa', { templateUrl: '/111.html' })
                  .when('/bbb', { templateUrl: '/222.html'});
  });

我想在用户更改路线时获取路线名称：

angular.module('myApp')
  .run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function(scope, current, pre) {
      // how to get current route name, e.g. /aaa or /bbb
      console.log('Current route name: ' + ???);
    }
  }]);

但我不知道如何得到它。我可以得到templateUrl，但不能得到路线名称。

更新

一个更复杂的用例：

$routeProvider.when('/users/:id', { templateUrl: '/show_user.html' })

如果当前路径是：

/users/12345

它应该匹配/users/:id，但我如何知道匹配哪个路由并获取路由名称/users/:id？

4

4 回答 4

62

你可以注入 $location 服务并使用它的 path() 函数。

angular.module('myApp')
  .run(['$rootScope','$location', '$routeParams', function($rootScope, $location, $routeParams) {
    $rootScope.$on('$routeChangeSuccess', function(e, current, pre) {
      console.log('Current route name: ' + $location.path());
      // Get all URL parameter
      console.log($routeParams);
    });
  }]);

您可以在文档中找到其他有用的 $location 方法

更新

如果你想拥有一个当前路由参数的数组，只需像我在上面所做的那样注入 $routeParams 服务。

于 2013-03-12T07:13:55.953 回答
8

您不必注入$location和$routeParams.
您可以使用current.$$route.originalPath

app.run(function ($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (e, current, pre) {
        console.log(current.$$route.originalPath);
    });
});

这对于简单的路线（没有:id等）就足够了。

对于更复杂的用例，它将返回/users/:id.
但是您可以从中提取:id参数current.params.id并在完整路径中替换它。

app.run(function ($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (e, current, pre) {
        var fullRoute = current.$$route.originalPath,
            routeParams = current.params,
            resolvedRoute;

        console.log(fullRoute);
        console.log(routeParams);

        resolvedRoute = fullRoute.replace(/:id/, routeParams.id);
        console.log(resolvedRoute);
    });
});

根据您对路由字符串的确切需求，与 Flek 的答案相比，这可能会很混乱（例如，如果您有多个参数），或者您不想被绑定到路由参数名称。

另请注意：您的代码中缺少一个右大括号作为$on左大括号。

编辑 2014 年 15 月 1 日

看起来$$Angular 中的属性被建议为私有的，我们不应该直接从我们的代码中调用它们。

于 2013-12-25T11:55:47.833 回答
2

不是一个非常优雅的解决方案，我只在 Chrome DevTools 中对其进行了测试，但它似乎有效：

Object.getPrototypeOf($route.current) === $route.routes['/users/:id];

对于其他想要使用它的人，只需替换'/users/:id'为您在定义路线时使用的模式。

此外，如果您想匹配其他路径，只需使用$route.routes['null']

免责声明：这只是我发现的一种解决方法，对我有用。鉴于此行为未记录在案，并且我没有对其进行测试以查看它是否适用于所有场景，因此使用它需要您自担风险。

于 2015-07-29T17:43:28.497 回答
1

我认为你可以很容易地从current

app.run(function ($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (e, current, pre) {
        console.log(current.originalPath); // Do not use $$route here it is private
    });
});
于 2017-02-17T05:18:04.887 回答