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

Question

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

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

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

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

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

Answer 1

您有多种解决方案来实现您想要的:
在 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

The problem with this solution is that you will be limited if the uri is too long (if you have a big state).

使用客户端存储系统
您可以使用 localStorage、sessionStorage 或 cookie。
只需将状态存储在 localStorage 中:

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

并检索它:

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

With this solution, do not forget to remove the state from the localStorage just after consuming it.