ui-router：在新选项卡中打开状态，target="_blank"，参数丢失

Posted 2023-03-05

【中文标题】ui-router：在新选项卡中打开状态，target="_blank"，参数丢失

【英文标题】：ui-router: open state in new tab with target="_blank", params are lost

【发布时间】：2016-01-18 21:11:29

【问题描述】：

我正在做一个 Angular 应用程序，其中每个表格的行都有一个按钮，单击这些按钮时，应该为该按钮所在的行打开一个新选项卡。

我需要将参数传递到以这种方式创建的新选项卡中。我已经在状态初始化中声明了参数：

.state('viewlisting', 
   url: "/listings/:id",
   params: 
     'action': '',
   ,
   controller: 'ListingsController',
   templateUrl: "partials/listings/view_listing.html"
 );

按钮有这样的东西：

ui-sref='viewlisting(id:"+data+", action:"images")'

参数传入，一切正常。

//URL: /#/listings/42
$state.params.action //returns "images"
$state.params.id //returns "42"

但是将target="_blank" 添加到<a> 标记会导致$state.params 对象返回以下内容：

//URL: /#/listings/42
$state.params.action //returns ""
$state.params.id //returns "42"

我已经搜索了几个小时，我查看了 ui-router 文档和问题跟踪器，以寻找可以解决我的情况的内容，但我什么也没找到。

target='_blank''ed ui-sref 链接上是否没有传递状态参数？

【参考方案1】：

还有另一种不使用 URL 的方法。您可以使用LocalStorage 代替网址。

在链接标签上使用ng-click 并调用函数。在函数中将参数放入LocalStorage。然后在app.run 中使用$rootScope.$on("$stateChangeStart") 并检查LocalStorage 是否有参数。然后获取params 并使用params 调用$state。

//in page controller: 
var openNewTab = function ()                   
                    localStorage.newTab = JSON.stringify(
                        state: "yourState",
                        params: 
                            param1: "someparam1",
                          param2:"someparam2"
                        
                    );                  
                    window.open(document.location.origin);
                      
                
 
 //angular app run config: 
angularApp.run(function($state)
if(localStorage.newTab)
   var newTab = JSON.parse(localStorage.newTab);
   localStorage.removeItem("newTab");
   $state.go(newTab.state, newTab.params);
   event.preventDefault();

)

<a ng-click="openNewTab()" >open new tab</a>

【参考方案2】：

如果有任何参数应该在当前 SPA 上下文之外可用（新窗口，新标签） - 它必须是 url 的一部分。 p>

这将起作用：

.state('viewlisting', 
   // instead of this
   // url: "/listings/:id",
   // this will keep the action in a new window
   url: "/listings/:id?action",
   params: 
     'action': '',
   ,
   controller: 'ListingsController',
   templateUrl: "partials/listings/view_listing.html"
 );

有关参数的更多详细信息How to pass parameters using ui-sref in ui-router to controller

【讨论】：

谢谢你。不知何故，我知道这是可能的，但我想保留 URL 中的操作参数。我只是想问是否有办法可以将生成的 url /listings/42?action=images 更改为 listings/42。

答案现在应该很清楚了（我的意思是在我回答之后）——不，这是不可能的。 URL 是与外部世界交谈的唯一方式。那是新标签、新窗口或只是通过电子邮件发送的链接。所有需要的参数都必须嵌入到 url 中。现在清楚了吗？

你已经说得很清楚了，我问的是如何在/listings/42?action=images之后将地址栏上写的URL更改为listings/42。这并不是说我拒绝您的回答，我只是不想将参数暴露给用户，所以我在想是否可以在页面加载后更改 URL。

嗯，有一些技术可以应用重定向。例如。这里***.com/q/29491079/1679310 （所以你可以吞下第二个状态的参数......） 1）用户将导航到带有url参数的某个状态 2）在状态更改时将其转换为$ state.go 并传递给其他状态，没有 url 参数。可能是这样...

感谢您提供链接问题！一定会试试这个。也感谢您的宝贵时间！