在 Angular 8 的新选项卡中打开 url 时如何使用状态传递数据

在同一选项卡中打开网址时，我可以使用状态传递数据。我使用了以下代码片段。

<a routerLink="/testPage " [state]="{ hello: 'world' }">click here</a>

但是，当我尝试使用 target="_blank" 属性进行相同操作以在新选项卡中打开时。我无法从状态获取数据。

<a routerLink="/testPage " [state]="{ hello: 'world' }" target="_blank">click here</a>

我可以使用查询参数传递数据。但查询字符串的大小有限制。 是否可以在新选项卡中使用状态传递数据？

您有多种解决方案来实现您想要的：

在 URL 中传递状态

通过直接将状态对象放入 queryParams 输入中

<a routerLink="/testPage " [queryParams]="{ hello: 'world' }" target="_blank">click here</a>

然后你可以通过以下方式检索你的状态：

this.route.snapshot.queryParams

使用此方法，您可以将它们作为对象获取 queryParams 并恢复您的状态。 问题是，如果您需要向查询添加其他信息，它将干扰您发送的状态。

• 通过对状态进行编码并将其发送到查询的单个参数中

<a routerLink="/testPage " [queryParams]="{ state: encodeURIComponent({ hello: 'world' }) }" target="_blank">click here</a>

然后你可以通过以下方式检索你的状态：

decodeURIComponent(this.route.snapshot.queryParams.state)

有关该功能的更多信息：https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/decodeURIComponent https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/decodeURIComponent

这个解决方案的问题是，如果 uri 太长（如果你有一个很大的状态），你将会受到限制。

使用客户端存储系统

您可以使用 localStorage、sessionStorage 或 cookie。

只需将状态存储在 localStorage 中：

localStorage.setItem('state', JSON.stringify(state))

并检索它：

JSON.parse(localStorage.getItem('state'))

使用此解决方案，不要忘记在使用 localStorage 后立即将其删除。