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

Question

我正在使用 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。但是，子组件无法获取数据。

例如)data.service.ts

private _data = {};

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

getValue() { return this._data;}

测试.ts

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

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

测试子.ts

data: any;

constructor(private dataService: DataService) {}

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

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

Answer 1

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

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

您可以在 window.open() 之前在 localStorage 中设置项目，如下所示

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

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

获取数据对象

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

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

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