问题描述
我在 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
我建议执行以下步骤:
- 不要使用
params
属性,而是将您的参数添加到 URL
(在您的示例中,将状态定义中的url
属性更改为:url: "/code?offer",
) - 在使用
offer
对象调用$state.href()
之前 - 使用JSON.stringify(offer)
将其转换为字符串/li> - 在接收端,使用
JSON.parse(offer)
将参数转换回来
- Instead of using the
params
property, add your parameter to the URL
(in your example, change theurl
property in the state definition to:url: "/code?offer",
) - Before calling
$state.href()
with theoffer
object - convert it to a string usingJSON.stringify(offer)
- 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:
- 如果用户打开多个选项卡,他们的 localStorage 状态将被彼此覆盖.如果这种情况发生得足够快,或者应用程序需要足够的时间来加载 - 用户将看到多个标签,所有标签都包含他们点击的最后一个链接的内容.
- 用户无法在不丢失状态的情况下为新打开的标签添加书签,甚至无法刷新它,从而导致页面无法使用.
这篇关于ui-router:在新选项卡中打开状态,目标=“_blank",对象参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!