Angular 8 在新 window 网格行操作中路由到另一个组件并传递整行

Question

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

我试过以下方法：


//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>

Answer 1

当您打开新标签时，两个网页是分开的，状态不会延续。

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

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

Angular 8 在新 window 网格行操作中路由到另一个组件并传递整行

Angular 8 Route to another component in new window on grid row action and pass entire row

.net

c#

typescript

angular

angular8