如何通过$transition$.params修改AngularJS状态参数值？

你遇到的这个TypeError是因为UI Router返回的$transition$.params()对象是**不可变（immutable）**的——框架这么设计是为了保证路由参数的一致性，防止意外修改导致的状态混乱。下面给你两种针对性的解决方案，根据你的需求选择：

方案1：仅在当前逻辑中使用修改后的参数（不更新路由状态） #

如果你的需求只是让CommonUtils.checkParamtersAndLog使用修改后的backFilters值，不需要改变路由的实际参数，那么只需要把不可变的params对象复制成一个可修改的副本即可：

修改控制器代码 #

(function () { 
  'use strict'; 
  angular.module('app').controller('BaseInformationController', BaseInformationController); 

  function BaseInformationController($transition$, CommonUtils) { 
    var vm = this; 

    // 1. 把不可变的params复制为可修改的新对象
    var mutableParams = Object.assign({}, $transition$.params());
    // 或者用ES6扩展语法：var mutableParams = {...$transition$.params()};

    // 2. 修改副本中的参数值
    mutableParams.backFilters = 20;

    // 3. 把副本传给CommonUtils（需要稍微调整工具方法兼容）
    CommonUtils.checkParamtersAndLog(mutableParams);
  } 
})();

调整CommonUtils的方法（兼容两种传入方式） #

让工具方法既能接受原来的transition对象，也能直接接受参数对象，这样不需要改动其他地方的调用：

(function () { 
  'use strict'; 
  angular.module('app').factory('CommonUtils', CommonUtils); 

  function CommonUtils() { 
    var service = { checkParamtersAndLog: checkParamtersAndLog }; 

    function checkParamtersAndLog(input) { 
      // 判断传入的是transition对象还是直接的params
      var backFilters = typeof input.params === 'function' 
        ? input.params().backFilters 
        : input.backFilters;

      if(backFilters == null) {
        console.log('backFilters is null');
      } else {
        console.log('backFilters is not null')
      }
    } 

    return service; 
  } 
})();

方案2：更新路由的实际参数（同步到地址栏/路由状态） #

如果你需要让修改后的backFilters真正成为路由的当前参数（比如后续的路由跳转、其他组件读取参数时能拿到新值），可以用$state.go重新跳转当前状态，传入新参数：

(function () { 
  'use strict'; 
  angular.module('app').controller('BaseInformationController', BaseInformationController); 

  function BaseInformationController($transition$, $state, CommonUtils) { 
    var vm = this; 
    var currentStateName = $transition$.to().name;

    // 合并现有参数和新的backFilters值
    var newParams = {...$transition$.params(), backFilters: 20};

    // 重新跳转当前状态，设置参数并避免不必要的重载
    $state.go(currentStateName, newParams, {
      notify: false, // 不触发路由变更事件（如果不需要的话）
      reload: false, // 不重新加载控制器和模板
      location: 'replace' // 替换当前历史记录，防止回退到旧参数
    });

    // 此时如果需要立即使用新参数，直接传newParams给工具方法
    CommonUtils.checkParamtersAndLog(newParams);
  } 
})();

这个方案会更新路由的参数状态，地址栏也会同步变化（如果你的路由参数在URL中），后续任何读取$state.params或$transition$.params()的地方都会拿到修改后的值。

总结 #

• 只是临时用修改后的值：选方案1，简单高效，不影响路由状态
• 需要持久化修改路由参数：选方案2，真正更新路由的参数状态

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