Angular中无法通过$routeParams.id获取ID问题求助

兄弟，这种坑我踩过！你说console.log($routeParams)能看到id字段，但$routeParams.id却返回undefined，大概率是这几个原因，挨个排查试试：

• 路由参数大小写不匹配
  Angular的$routeParams是大小写敏感的！比如你的路由配置里写的是:Id（大写I），那你就得用$routeParams.Id来访问，而不是$routeParams.id。这时候console.log整个对象会显示Id字段，用小写自然拿不到值。
  举个错误的路由配置例子：

  angular.module('blogList').config(function($routeProvider) {
    $routeProvider
      .when('/blog/:Id', { // 这里参数名是大写Id
        component: 'blogList'
      });
  });
  

  这时候你得改成$routeParams.Id才能拿到值。

• 组件未正确注入$routeParams服务
  检查你的组件controller里有没有注入$routeParams，很多新手会漏这一步。完整的组件代码应该是这样的：

  var app = angular.module('blogList').component('blogList', {
    template: '<div>' + 
                '{{$ctrl.title}}' + 
                '<button ng-click="$ctrl.someFunc()">Click</button>' + 
                '<ul ng-if="$ctrl.items.length > 0">' + 
                  '<li ng-repeat="item in $ctrl.items">{{item.title}}</li>' + 
                '</ul>' + 
              '</div>',
    controller: ['$routeParams', function($routeParams) {
      var vm = this;
      vm.someFunc = function() {
        console.log($routeParams); // 能看到id字段
        console.log($routeParams.id); // 现在应该能正常获取了
      };
    }]
  });
  

  注意组件里的模板要使用$ctrl来绑定controller里的属性和方法（Angular 1.5+组件的规范），之前你的模板里直接用someFunc()可能会找不到方法哦。

• 尝试用$route.current.params.id替代
  有时候直接访问$route.current.params会更可靠，尤其是路由解析时机的问题。你可以改成这样试试：

  // 记得先注入$route服务
  controller: ['$route', function($route) {
    var vm = this;
    vm.someFunc = function() {
      console.log($route.current.params.id);
    };
  }]
  

• 检查路由解析时机
  如果是在组件初始化时就获取参数，可能路由还没完全解析完成。可以用$onInit钩子（Angular 1.5+支持）来确保在组件初始化完成后再获取：

  controller: ['$routeParams', function($routeParams) {
    var vm = this;
    vm.$onInit = function() {
      // 组件初始化后再获取参数
      console.log($routeParams.id);
    };
  }]
  

先从大小写匹配开始排查，这个是最常见的原因！

内容的提问来源于stack exchange，提问作者RoyBarOn