ui-router：在新标签页中使用 target="_blank" 打开状态，参数丢失

Question

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

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

.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 对象 return 如下：

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

我已经搜索了几个小时，我查看了 ui-路由器文档和问题跟踪器以寻找可以解决我的情况的内容，但我一无所获。

状态参数是否未在 target='_blank' 的 ui-sref 链接上传递？

Answer 1

如果有任何参数应该在当前 SPA 上下文之外可用 （新 window，新选项卡） - 它必须成为 url.

的一部分

这会起作用：

.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

Answer 2

还有另一种不使用 URL 的方法。您可以使用 LocalStorage 而不是 URL.

在 link 标签上使用 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>

ui-router：在新标签页中使用 target="_blank" 打开状态，参数丢失

ui-router: open state in new tab with target="_blank", params are lost

state

angularjs

angular-ui-router

ui-sref