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

如果有任何参数应该在当前SPA上下文（新窗口，新标签页）之外可用 - 必须成为网址的一部分。

这将有效：

.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"
 });

有关params How to pass parameters using ui-sref in ui-router to controller

的详细信息

Answer 2

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

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

//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：在新选项卡中打开状态，目标=“_空白”，参数丢失

2 个答案: