使用 URL 路由将状态参数传递到 AngularJS 中的新选项卡，而不显示在 URL 中答案

【问题标题】：Pass State params using URL Routing to a new tab in AngularJS without showing up in the url使用 URL 路由将状态参数传递到 AngularJS 中的新选项卡，而不显示在 URL 中
【发布时间】：2019-03-11 20:32:34
【问题描述】：

我正在使用带有 ui-router 的 AngularJS。我正在尝试将参数传递给新选项卡。所以我将参数从状态传递到控制器而不显示在 URL 中。我正在使用$state.href 的参数，如下所示：

在js文件中，

var paramValues = { 'path': true, 'logoValue': 123};
var achiveRoute = $state.href('state123', paramValues);
$window.open(achiveRoute, '_blank');

在状态文件中，

.state("state123", {
    url: "/sessiontimeline",
    templateUrl: /partials/session.html,
    params : { 'path': true, 'logoValue': null }
}

我正在尝试使用StateParams 访问控制器中的这些参数。

var logoValue = $stateParams.logoValue;

但是logoValue 显示的是undefined。

如何设置/读取路由中的路径参数？

【问题讨论】：

你能告诉控制器你在哪里使用var logoValue = $StateParams.logoValue;吗？具体来说，让我们看看你在那个控制器中注入了什么。
这里是控制器。 module.controller('sessionCtrl', ['$scope', '$state', '$stateParams', function ($scope, $state, $stateParams) {
您正在注入$stateParams，但随后您尝试使用大写“S”($StateParams.logoValue) 访问它。这可能会导致您的undefined 问题。
对不起，我编辑了我的帖子。我正在使用小“S”。那是一个错字。对不起。 var logoValue = $stateParams.logoValue;
如果您在$window.open() 调用之前console.log(achiveRoute)，值是多少？

标签： javascript angularjs angular-ui-router routeparams

【解决方案1】：

为了在查询字符串上传递这些参数，您必须定义您的路由，以便在查询字符串上接受它们。现在发生的情况是您没有使用接受查询字符串上的参数的 URL 定义状态，因此它使用您在状态中指定的默认值（true 用于 path 和 null 用于logoValue)。以下是您应该如何定义您的状态以接受查询字符串上的这些参数：

.state("state123", {
    url: "/sessiontimeline?path?logoValue",
    templateUrl: /partials/session.html,
    params : { 'path': true, 'logoValue': null }
}

通过上述配置，您可以直接通过$state.go 调用或通过查询字符串传递参数，您的$state.href('state123', paramValues) 应输出/sessiontimeline?path=true&logoValue=123。

【讨论】：

是的，我们可以使用查询字符串传递 URL，但我的问题是传递参数而不在 URL 中提及。这就是我使用参数传递值的原因。有没有其他方法可以通过？
如果你想打开一个新窗口并通过路由传递参数，你必须使用查询字符串。如果您不想这样做，则必须使用本地存储之类的东西。