2

我在角度应用程序中使用 ui-router 进行状态导航，在其中一种情况下，我必须导航到不同选项卡中的新状态。

我有以下状态

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

参数中的 offer 是一个对象。在同一浏览器中导航到此状态时，它工作正常。但是当在不同的浏览器中导航到这个状态时，报价为空。

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

谢谢，山姆

4

4 回答 4

1

我已经在打字稿中完成了它并且它有效：

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);
于 2017-03-03T09:53:05.517 回答
1

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

于 2016-01-10T09:07:50.757 回答
1

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

我建议以下步骤：

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

简单干净。

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

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

干净的方法是不打开新的浏览器选项卡。正如 sina 所说，创建了一个新的 Angular 应用程序实例。这意味着所有可能保留在服务中的状态都将丢失。想不出其他可能性：

  1. 将相关信息放在网址中
  2. 我认为您不能与 $window 共享信息，但您可以使用 localStorage
  3. Cookies 也是一个有效的选项

Javascript：在选项卡之间共享数据

于 2016-01-10T09:57:59.623 回答