AngularJS - 更新 $route 参数的最佳方法

Posted 2023-04-14

【中文标题】AngularJS - 更新 $route 参数的最佳方法

【英文标题】：AngularJS - Best way to update $route parameter

【发布时间】：2012-11-18 03:47:15

【问题描述】：

我有几条不同的路线，但包含相似的参数。 示例：

when '/user/:accountId/charts/:chartType', controller:ChartsController
when '/manager/:accountId/charts/:chartType', controller:ChartsController
when '/whatever/pathy/paththingy/charts/:chartType', controller:ChartsController

请注意，所有三个视图都使用相同的图表控制器来控制视图。它是一个相当通用的控制器，但它需要在可用的图表类型之间切换......同时保留其余的路线。 示例：（这不起作用）

if my currrent url is '/user/001/charts/comparison'
Then I call something like:
$route.current.params.chartType = 'newChart';
$route.reload(); // or soemthing similar?
I want the url to become '/user/001/charts/newChart'

有谁知道如何在不完全重新键入或重建路由路径的情况下轻松更新路由参数？

【参考方案1】：

从 Angular 1.3 开始，您可以使用 $route.updateParams(newParams) 更改路由参数。

Here is a quote from the angular docs...

$route.updateParams(newParams);

导致$route 服务更新当前 URL，将当前路由参数替换为指定的参数 在newParams。提供与路由路径匹配的属性名称 段定义将被插入到位置的路径中， 而其余的属性将被视为查询参数。

【参考方案2】：

如果可能，我建议您改用ui-router。它在很多方面都比 ngRoute 更强大。

本质上，这个模块有一个称为state的更高级别的概念，它包裹了底层路由，保护您不直接工作具有较低的路由级别，如路由 url。

比较：What is the difference between angular-route and angular-ui-router?

使用 ui-router，您可以像这样实现您的代码：

$stateProvider
  .state('user.chart', 
     url: '/user/:accountId/charts/:chartType',   
     controller: "ChartsController"   
  )
 .state('manager.chart', 
     url: '/manager/:accountId/charts/:chartType', 
     controller: "ChartsController"
  )
 .state('pathy.chart', 
     url: '/whatever/pathy/paththingy/charts/:chartType', 
     controller: "ChartsController"
  )

您可以使用此代码在状态之间导航：

$state.go('user.chart',chartType:'newChart',inherit:true);

Documentation

【参考方案3】：

缺少这个简单的功能让我很恼火，所以我Implemented it and filed a PR on GitHub