时间戳

首页 > 解决方案 > Angular 8 在网格行操作的新窗口中路由到另一个组件并传递整行

c# - Angular 8 在网格行操作的新窗口中路由到另一个组件并传递整行

问题描述

在从网格中选择操作时，我想在新选项卡中打开另一个组件。同时我想传递整行数据，以便在新选项卡中打开另一个组件时加载数据。

我试过以下：


//redirects and load new component data correctly but opens in current tab instead of new tab

navigate(row: ExampleRow){
this.router.navigate(['/new-page/1'], {state: {data: {row}}}); } 

//open new component in current window loaded with data but opens component with empty data in new tab as well
navigate(row: ExampleRow){
this.router.navigate([]).then(result => {  window.open('/new-page/1', '_blank'); }); }

// Throws error
<a [routerLink]="['/new-page', row.id]" [state]="{ data: row }" >Navigate</a>

标签： c#.netangulartypescriptangular8

解决方案

当您打开一个新选项卡时，两个网页是分开的，并且状态不会延续。

navigate(row) {
  localStorage.setItem('data', JSON.stringify(row));
  window.open('/new-page/1', '_blank');
}

另一个.component.ts

ngOnInit(): void {
  this.localTemp = JSON.parse(localStorage.getItem('data'));

  // here you can choose to keep it in the localStorage or remove it as shown below
  localStorage.removeItem('data');
}

推荐阅读