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

【问题标题】：How to pass data using state when opening a url in a new tab in Angular 8在Angular 8的新选项卡中打开url时如何使用状态传递数据
【发布时间】：2020-07-17 07:57:23
【问题描述】：

在同一选项卡中打开网址时，我可以使用状态传递数据。我使用了以下sn-p。

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

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

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

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

【问题讨论】：

取决于你可以使用本地存储的大小

标签： javascript angular typescript

【解决方案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)

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

使用客户端存储系统

您可以使用 localStorage、sessionStorage 或 cookie。

只需将状态存储在 localStorage 中：

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

并检索它：

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

使用此解决方案，不要忘记在使用后立即从 localStorage 中删除状态。

【讨论】：

【解决方案2】：

使用 localStorage 可以解决您的问题。通过这种方式，您可以在站点重新加载和打开不同选项卡之间保留数据。

【讨论】：

【解决方案3】：

您可以将其作为查询参数传递。

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

然后你使用ActivatedRoute访问它：

constructor(private route: ActivatedRoute) {}
...
this.route.snapshot.queryParams // This is what you want to get

【讨论】：