从 Angular 应用程序打开一个新选项卡，其中包含一些需要在新选项卡中显示的数据答案

【问题标题】：Open a new tab from an angular application with some data that needs to be shown in the new tab从 Angular 应用程序打开一个新选项卡，其中包含一些需要在新选项卡中显示的数据
【发布时间】：2020-09-04 04:38:44
【问题描述】：

我有一个角度应用程序，其中一个组件根据所选选项显示数据。现在从另一个页面中，我需要在新选项卡中打开此页面。我尝试使用 href 和 window.open(url) 但每当我在新标签页中打开 url 时，所有数据都会被重置。

我正在尝试实现一种方式，使我的选择也保留在新标签中。

goToNewTab(){
 this.selectedYear = [2020,2021,2022]
 const url = "demo-project/checkBirth"
 window.open(url, '_blank')
}

这里我也需要“this.selectedYear”才能转到新标签。

请注意：- 我无法更新 url 并在其中传递所选年份的任何查询参数。网址必须相同。

【问题讨论】：

可以使用片段吗，比如demo-project/checkBirth#selectedYear=2020？
no 不能更改 url @Thomas 中的任何内容
添加到 sessionStorage 或 LocalStorage 中

标签： javascript html angular frontend angular8

【解决方案1】：

将其添加到会话存储中

sessionStorage.setItem("selectedYear", this.selectedYear);

并在初始加载时提取它

 return sessionStorage.getItem("selectedYear");

【讨论】：

好的，所以我检查了，setItem() 的键值对只能是字符串，现在如果我需要发送多年，我将不得不将它全部连接到一个字符串，然后中断它在我的下一个组件中，如果要发送多年，任何其他方法

【解决方案2】：

由于您的要求是在新选项卡中打开给定的 URL，而不使用参数化路由，因此我建议您使用 localStorage，因为 sessionStorage 仅存在于当前浏览器选项卡中。

您可以执行以下操作，

goToNewTab() {
this.selectedYear = 2020;
localStorage.setItem("selectedYear", 2020);
const url = "demo-project/checkBirth";
window.open(url, '_blank'); }

在新选项卡中打开的组件类的构造函数中，您可以执行以下操作，

constructor() { this.yearOfBirth = localStorage.getItem('selectedYear') }

话虽如此，另一种方法是在两个组件之间调用共享单例服务来提取值。

【讨论】：

好的，所以我检查了，setItem() 的键值对只能是字符串，现在如果我需要发送多年，我将不得不将它全部连接到一个字符串，然后中断它在我的下一个组件中，如果要发送多年的任何其他方法，例如我必须发送一系列年
@AchalUtkarsh 您可以创建一个可注入的单例服务。在您用于在 selectedYears 变量中设置值的组件和您在新选项卡中显示变量 selectedYears 值的组件之间共享此服务。
不了解这个可注入服务，我不需要localStorage选项，还有一件事不是demo-project / checkBirth只能从此链接打开，在应用程序内部可以重新路由, 这个在新标签中打开是一项新功能，用户可以在两个屏幕上查看数据并同时进行编辑
您仍然可以使用 localStorage，方法是存储数组而不是字符串。