如何使用 AngularJS 的 ui-router 提取查询参数？

Posted 2023-02-19

【中文标题】如何使用 AngularJS 的 ui-router 提取查询参数？

【英文标题】：How to extract query parameters with ui-router for AngularJS?

【发布时间】：2013-10-03 22:36:02

【问题描述】：

如何使用 ui-router 为 AngularJS 提取查询参数？

在 AngularJS 自己的 $location 服务中我做了：

($location.search()).uid

从 URL 中提取参数 uid。 ui-router对应的代码是什么？

【问题讨论】：

这有帮助吗***.com/questions/11758079/…

谢谢，但没有。这个答案与 Angular 的内置路由有关。我正在使用 ui-router（上面的链接）进行 nested 路由。

【参考方案1】：

对于 AngularJS 和 ui-router 的最新版本，我认为您可以使用 $state 访问参数：

$state.params[<PARAMETER_NAME>]

您在 app.js 中定义状态的位置如下：

.state('app.name', 
    url: '/:some_param_id',
    templateUrl: '/templates/home.html'
)

【参考方案2】：

您可以从 $stateParams 获取它，但在这种情况下，您还必须在路由中声明查询变量。

在路由中声明 -

url: '/path?name'

用于在控制器中获取名称注入 $stateParams ， 并使用喜欢 -

$stateParams.name

【参考方案3】：

请参阅URL routing documentation 的查询参数部分。

您还可以将参数指定为查询参数，在“？”之后：

url: "/contacts?myParam"
// will match to url of "/contacts?myParam=value"

对于本例，如果 url 是 /contacts?myParam=value，那么 $state.params 的值将是：

 myParam: 'value' 

【讨论】：

对于查询参数，你真的必须使用$state.params，因为它写在答案中。不是$stateParams，我用过但没用。

@thisgeek 当我使用 url: "/verifyMail?username" 我得到 $state.params 的值为空

与@AnushaNilapu 相同...以前可以，但对我不再有效

【参考方案4】：

您还需要在 $stateProvider 中定义查询参数，例如

state('new-qs', 
  url: '/new?portfolioId&param1&param2',
  templateUrl: 'new.html',
  controller: function($scope, $stateParams) 
     $scope.portfolioId = $stateParams.portfolioId;
     $scope.param1 = $stateParams.param1;
     $scope.param2 = $stateParams.param2;
  
)

正如benfoster.io解释的那样

【讨论】：

感谢您的回答！这为我解决了问题:)

【参考方案5】：

ui-router 不像 $location 服务那样区分 url 中不同类型的参数。

在您的控制器中，您可以使用 $stateParams 服务来访问您 url 中所有不同类型的参数。

以下是来自 ui-router wiki 的示例：

// Then you navigated your browser to:
'/users/123/details/default/0?from=there&to=here'

// Your $stateParams object would be
 id:'123', type:'default', repeat:'0', from:'there', to:'here' 

所以在你的情况下找到 uid 参数只需使用：

$scope.uid = $stateParams.uid

【参考方案6】：

除非您绑定到查询参数（请参阅文档），否则您不能直接通过$state 或$stateParams 访问它们。使用$location 服务。

编辑：根据the docs，如果要捕获$stateParams 中的查询参数，可以将? 附加到url，并命名每个查询参数，以&，即url: "/foo?bar&baz"。

【讨论】：

感谢您的澄清。我不确定这是否是正确的选择。

@Nate Abele 您将如何绑定到查询参数。在我的例子中，我正在构建一个过滤记录表的视图，因此用户在文本字段中输入一个值，该值应该是一个查询参数，以便可以链接到过滤结果。

@mtpultz 文档只说 to 做什么，而不是 不 做什么。

@MarkAlanEvans 更新了我的答案以解决您的问题。

现在，如果我的查询字符串没有模式，但仍想收集该数据怎么办？就像您的 URL 与带有过滤器等的 OData 调用模式相同？