打开一个包含对象数据的新 Angular 选项卡？答案

【问题标题】：Open a new Angular tab with object data?打开一个包含对象数据的新 Angular 选项卡？
【发布时间】：2019-12-07 02:01:24
【问题描述】：

我正在使用 Angular 7，我想用对象数据打开一个新的 Angular 选项卡。当用户点击按钮时，对象数据将被发送并打开一个包含数据的新选项卡。

我为此尝试了 3 件事。

让 win = window.open('test-child', '_blank');

win.document.getElementById('text1');

this.router.navigate(['test', obj]);

例如）data.service.ts

private _data = {};

setValue(value) { this._data = value; }

getValue() { return this._data;}

test.ts

obj = { name: 'pat', age: 30 };

openNewTab() { 
    this.data.setOption(this.obj); 
    windows.open('test-child', '_blank');
}

test-child.ts

data: any;

constructor(private dataService: DataService) {}

ngOnInit() { this.data = this.dataService.getValue(); }

那么在这种情况下，我如何发送对象数据以在 Angular 中打开一个新的组件选项卡？请任何人帮助我。

【问题讨论】：

尝试使用“虚拟标签”。意思是应用内的标签
“Angular 标签”是指运行 Angular 应用程序的新浏览器标签？数据是否必须来自原始选项卡？您可以将新选项卡指向从服务器或浏览器的本地存储中检索数据的特定 URL。
caniuse.com/#feat=x-doc-messaging 您可以使用文档消息传递。这与角度无关。

【解决方案1】：

您可以使用localStorage 在多个选项卡之间共享数据。

存储在 localStorage 中的数据会一直存在，直到被明确删除。所做的更改已保存，可供所有当前和将来访问该网站的用户使用。

你可以在window.open()之前如下在localStorage中设置item

let data = {name : 'test' };
localStorage.setItem('object', JSON.stringify(data));

当打开新标签时，您可以使用

获取数据对象

let data = JSON.parse(localStorage.getItem('object'));

注意：请勿在 localStorage 中保存敏感数据。

它适用于同源策略。因此，存储的数据将仅在同一来源上可用。

【讨论】：