Angular中如何以非URL方式传递ID列表并切换路由？

嘿，这个场景我太熟悉了——当需要传递的ID数量多到把URL撑得老长时，不仅难看，还可能触发浏览器的URL长度限制（虽然现代浏览器上限很高，但总归不是最佳实践）。在AngularJS里，你可以用下面几种方案来实现「类似POST传参+路由跳转」的需求，完全不用把参数暴露在URL里：

方案1：用共享服务暂存数据（最常用） #

核心思路是把要传递的ID列表存在一个全局共享的服务里，切换路由后再从服务中取出。这种方式简单直接，适合绝大多数场景。

第一步：创建共享服务 #

先定义一个专门用来传递数据的服务，比如叫ProductTransferService：

angular.module('yourApp')
  .service('ProductTransferService', function() {
    // 用私有变量存数据，避免外部直接修改
    let _selectedIds = [];

    // 存数据的方法
    this.setSelectedIds = function(ids) {
      _selectedIds = angular.copy(ids); // 深拷贝避免原数组被修改
    };

    // 取数据的方法
    this.getSelectedIds = function() {
      return angular.copy(_selectedIds); // 返回拷贝，防止外部篡改内部数据
    };
  });

第二步：源控制器中存数据并跳转 #

在你原来调用$location.path()的地方，先把ID存到服务里，再跳转路由：

// 假设这是你原来的控制器
angular.module('yourApp')
  .controller('ProductListController', function($scope, $location, ProductTransferService) {
    // 你的业务逻辑，得到ids列表
    const ids = [1130, 1132, 7428, 15574, 15579, 15580, 6798968768697789];

    // 先把ID存到服务
    ProductTransferService.setSelectedIds(ids);
    // 再跳转到目标路由，不用加search参数了！
    $location.path('/product/approveProducts');
  });

第三步：目标控制器中取数据 #

在接收参数的控制器里，直接从服务中取出ID列表：

angular.module('yourApp')
  .controller('ApproveProductsController', function($scope, ProductTransferService) {
    // 从服务获取ID列表
    $scope.selectedIds = ProductTransferService.getSelectedIds();
    
    // 接下来就可以用这些ID做审批逻辑了
    console.log('要审批的产品ID：', $scope.selectedIds);
  });

方案2：配合路由的resolve属性（更严谨的做法） #

如果你希望目标路由的控制器只有在数据准备好之后才加载，可以用AngularJS路由的resolve属性，它能确保控制器初始化时数据已经到位。

修改路由配置 #

在路由配置里，给目标路由添加resolve项，从服务中获取数据：

angular.module('yourApp')
  .config(function($routeProvider) {
    $routeProvider
      .when('/product/approveProducts', {
        templateUrl: 'views/approve-products.html',
        controller: 'ApproveProductsController',
        resolve: {
          // 这里的selectedIds会被注入到目标控制器中
          selectedIds: function(ProductTransferService) {
            const ids = ProductTransferService.getSelectedIds();
            // 可以在这里做数据校验，如果没有数据可以跳回原路由
            if (!ids.length) {
              throw new Error('没有选中的产品ID');
            }
            return ids;
          }
        }
      });
  });

目标控制器直接注入resolve的参数 #

这时候控制器里不用再调用服务，直接用注入的selectedIds即可：

angular.module('yourApp')
  .controller('ApproveProductsController', function($scope, selectedIds) {
    $scope.selectedIds = selectedIds;
    // 业务逻辑处理
  });

补充说明 #

• 如果担心页面刷新后数据丢失（因为服务里的数据存在内存中），可以把数据存在$localStorage或$sessionStorage里（需要引入angular-local-storage这类第三方模块），刷新后依然能获取到数据。
• 别想着用真正的POST请求来切换路由——AngularJS的前端路由是基于URL的，POST是HTTP请求，二者不是一回事。我们这里说的「类似POST」其实是指不通过URL暴露参数，用内存/存储的方式传递，达到和POST一样的隐式传参效果。

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