Question

我正在尝试利用后退按钮的历史记录，所以我使用传统的$ routeProvider和一个网址 ... /arg1/something/arg2/something,else/arg3/another/arg4/yet,another/arg5/final
但是，如果缺少一个argument，则以下路由提供程序将无法将剩余参数传递给$ routeParams：

angular.module('myApp', [ … ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/arg1/:args1/arg2/:args2/arg3/:args3/arg4/:args4/arg5/:args5', {
        templateUrl: 'views/main.html',
        controller: 'MainController'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

如何将$ routeProvider配置为传递存在的参数（如果可能的话，以任何顺序，如果不是，至少按顺序但缺少参数），则不必声明所有参数720（6！）不同场景的不同场景有不同的顺序或根本没有？

然后，我计划使用这些值通过以下方法填充控制器中的过滤器：

    function filterRouteParams (rp){
  if(rp.args1){
    $scope.args1 = rp.args1;
  }
  if(rp.args2){
    $scope.args2 = rp.args2.split(',');
  }
  if(rp.args3){
    $scope.args3 = rp.args3.split(',');
  }
  …
}

我对在网址上使用?查询有点熟悉，但据我所知，当我想要更新它时，我不知道如何将其与历史记录绑定，并且也允许使用后退按钮并维护查询，但我愿意接受教育！

Answer 1

我不明白你的问题，还是只是变得复杂？

您只需使用查询字符串来实现此目的。它与后退和前进按钮，历史推送/状态完美配合。

  angular.module('myApp', ['ngRoute'])
   .controller('MainController', function($scope, $route, $routeParams, $location) {
       $scope.$route = $route;
       $scope.$location = $location;
       $scope.$routeParams = $routeParams;
   })
   .controller('FilterController', function($scope, $routeParams) {
   })
  .config(function($routeProvider) {
    $routeProvider
     .when('/filter', {
      template: 'inside filter',
      controller: 'FilterController'
    })
    .otherwise({
      redirectTo: '/filter'
    });
  });

这是上述代码http://run.plnkr.co/plunks/OS38E38J11FeDS1hyHde/#/filter?c=3&d=4

的运行示例

以下是plnkr。

Answer 2

我认为处理此问题的最佳方法是通过查询字符串参数，因此您的路由定义如下：

.when('/filter', {
    controller: 'MainController'
})

您只需使用/filter?foo=44&bar=123&baz=true之类的网址，或使用代码：

$location.path('/filter').search('foo', $scope.fooValue).search('bar', $scope.barValue);

参数是可选的，可以按任何顺序指定，因为ngRoute不会对参数名称或值进行任何验证。

要访问控制器中的值：

.controller('MainController', function($scope, $routeParams) {

    if ($routeParams.foo) {
        // do argument processing
    }

})

$routeParams的文档：https://docs.angularjs.org/api/ngRoute/service/$routeParams

Answer 3

我不太懂，但你能用'？'你的路线内？例如

  $routeProvider
  .when('/arg1/:args1?/arg2/:args2?/arg3/:args3?/arg4/:args4?/arg5/:args5?', {
    templateUrl: 'views/main.html',
    controller: 'MainController'
  })
  .otherwise({
    redirectTo: '/'
  });

以下任何网址都有效

/ ARG1 / ARG2 / ARG3 / ARG4 / arg5
/ ARG1 / VALUE1 / ARG2 / ARG3 / ARG4 / arg5 /值5
....
/ arg1 / value1 / arg2 / value2 / arg3 / value3 / arg4 / value4 / arg5 / value5

那是你在找什么？

不幸的是我无法找到一种方法来删除这样的论点 / ARG1 / ARG2 / ARG4 / VALUE4 / arg5 /值5

角度路由器的动态routeProvider参数

3 个答案: