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

Open a new Angular tab with object data?

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

为此我尝试了 3 种方法。

  1. 我用了'window.open()'。我可以轻松打开一个新标签页，但我无法发送像对象数据这样的大数据。

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

win.document.getElementById('text1');

  1. 我也用过路由器。但是它无法打开新选项卡。只需导航至 url.

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

  1. 我用的是数据业务。我做了数据服务，有setValue和getValue。但是，子组件无法获取数据。

ex) 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');
}

测试-child.ts

data: any;

constructor(private dataService: DataService) {}

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

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

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

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

您可以在localStorage中设置项目如下window.open()

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

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

获取数据对象 
let data = JSON.parse(localStorage.getItem('object'));

注意：不要在localStorage中保存敏感数据。

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