Question

我在角度应用程序中使用ui-router进行状态导航，在其中一个场景中我必须导航到另一个选项卡中的新状态。

我有以下状态

.state("code",
        {
            url: "/code",
            params: { offer : null },
            templateUrl: "app/components/coupons/views/code.html"
        })

param中的提议是一个对象。在同一浏览器中导航到此状态时，它可以正常工作。但是当在不同的浏览器中导航到此状态时，提供的内容为null。

另一位用户在http://stackoverflow.hex1.ru/questions/33232761/ui-router-open-state-in-new-tab-with-target-blank-params-are-lost发布了同样的问题，但这里的param是属性而不是对象。因此，它可以添加到网址。

谢谢，萨姆

Answer 1

当您打开新标签页时，会在新标签页中创建新应用实例，因为它基于javascript，并且在页面新鲜时不会保留其参数。因此，您的状态加载null参数，因为此页面与您拥有的其他页面无关。作为解决方法，我建议您将数据附加到$window并在新页面上检索。

Answer 2

我已经在打字稿中完成了它的工作原理：

var myWindow=this.$window;
var myData={data:'testData'};
myWindow.localStorage.myData=JSON.stringify(myData);
window.open(this.state.href('state', {}, {absolute: false, inherit: true}));

然后在新标签控制器中：

var myWindow=this.$window;
var myData=JSON.parse(myWindow.localStorage.myData);

Answer 3

干净的方法是不要打开新的浏览器标签。正如新浪所说，你的角度应用程序的新实例已经创建。这意味着可能在服务中保留的所有状态都将丢失。想不出其他可能性：

将相关信息放入网址
我认为你不能分享使用$ window的信息，但您可以使用localStorage
Cookie也是一个有效的选项

Javascript: sharing data between tabs

Answer 4

将状态传递到新标签页的正确方法是通过URL

我建议执行以下步骤：

将参数添加到URL中，而不是使用params属性
（在您的示例中，将状态定义中的url属性更改为：url: "/code?offer",）
在使用$state.href()对象调用offer之前-使用JSON.stringify(offer)将其转换为字符串
在接收端，使用JSON.parse(offer)

简单干净。

关于其他人建议的 localStorage 解决方案-它会出现以下问题：

如果用户打开多个选项卡，则他们的localStorage状态将被彼此覆盖。如果这种情况发生得足够快，或者应用程序花费了足够的时间来加载-用户将看到多个选项卡，其中包含他们最后一次单击的链接的内容。
用户无法在不丢失状态的情况下为新打开的标签添加书签，甚至无法刷新它，从而使页面无法使用。

ui-router：在new选项卡中打开状态，target =“_ blank”，带对象参数

4 个答案:

将状态传递到新标签页的正确方法是通过URL

我建议执行以下步骤：

简单干净。