ui-router:在新选项卡中打开状态，目标=“_blank"，对象参数 [英] ui-router: open state in new tab with target=“_blank” with object params

问题描述

我在 angular 应用程序中使用 ui-router 进行状态导航，在其中一种场景中，我必须导航到不同选项卡中的新状态.

I am using ui-router for state navigation in angular application and in one of the scenario I have to navigate to a new state in an different tab.

我有以下状态

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

参数中的要约是一个对象.在同一浏览器中导航到此状态时，它工作正常.但是当在不同的浏览器中导航到此状态时，提供为空.

offer in param is an object. When navigating to this state in the same browser it works fine. But when navigating to this state in a different browser offer comes as null.

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

The same question was posted by another user here http://stackoverflow.hex1.ru/questions/33232761/ui-router-open-state-in-new-tab-with-target-blank-params-are-lost but here the param is a property and not an object. So, it could be added to url.

谢谢，山姆

推荐答案

将状态传递到新选项卡的正确方法是通过 URL

我建议执行以下步骤:

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

1. Instead of using the params property, add your parameter to the URL
   (in your example, change the url property in the state definition to: url: "/code?offer",)
2. Before calling $state.href() with the offer object - convert it to a string using JSON.stringify(offer)
3. In the receiving end, convert the param back using JSON.parse(offer)

简单干净.

至于其他人建议的 localStorage 解决方案 - 它会存在以下问题:

Simple and clean.

As for the localStorage solution that other people suggested - it will have the following issues:

1. 如果用户打开多个选项卡，他们的 localStorage 状态将被彼此覆盖.如果这种情况发生得足够快，或者应用程序需要足够的时间来加载 - 用户将看到多个标签，所有标签都包含他们点击的最后一个链接的内容.
2. 用户无法在不丢失状态的情况下为新打开的标签添加书签，甚至无法刷新它，从而导致页面无法使用.

这篇关于ui-router:在新选项卡中打开状态，目标=“_blank"，对象参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！