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

Question

我正在做一个 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 链接上是否没有传递状态参数？

Answer 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>

Answer 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