位置更改时如何获取路线名称？答案

【问题标题】：How to get the route name when location changes?位置更改时如何获取路线名称？
【发布时间】：2013-03-12 05:59:17
【问题描述】：

我定义了一些路线：

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？

【问题讨论】：

标签： angularjs

【解决方案1】：

您可以注入 $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);
    });
  }]);

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

更新

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

【讨论】：

仅供参考：Angular 中偶数处理程序的第一个参数不是范围，而是一个事件。我已经编辑了您的代码 sn-p 以反映这一点。 FWIW，currentScope 在事件对象上可用。
语法错误，即使在修复后也不起作用说：未知提供者：$routeParamsProvider
@Mike，这不是语法。您需要在模块上添加对 Route 服务的依赖项。 angular.module('ngApp', [ 'ngRoute', ...])

【解决方案2】：

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

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

这对于简单的路由来说已经足够了（没有:id等）。

对于更复杂的用例，它将返回/users/:id。
但是您可以从current.params.id 中提取: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 左大括号的右大括号。

编辑 15/01/2014

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

【讨论】：

【解决方案3】：

不是一个非常优雅的解决方案，我只在 Chrome DevTools 中测试过，但它似乎工作：

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

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

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

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

【讨论】：

【解决方案4】：

我想你可以很容易地从current得到路径

app.run(function ($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (e, current, pre) {
        console.log(current.originalPath); // Do not use $$route here it is private
    });
});

【讨论】：