如何在 Angular 的路由组件之间传递数据

Question

我有一个像这样的路由组件：

从组件 A：我有一个通过 API 获取的对象，目前我有一个按钮将我重定向到组件 B。

组件A和B之间没有父子关系。

我想要做的是在重定向到组件 B 的同时发送该对象，这样我就可以对其进行处理。

我不想像这样通过 URL 传递数据：

 return this.router.navigate(['associate-product/' + this.id, {this.data}]);

另外我不想将对象存储在 LocalStorage 上。

有办法实现这一点吗？

Answer 1

使用路由

如果您想使用路由将数据从一个组件传递到另一个组件，您可以使用NavigationExtras.

在 CompA 中您可以执行以下操作：

constructor(private router: Router){
}

goToCompB(){
  this.router.navigate(['route_to_comp_b/' + `${params_if_any}`], {
    state:{
      data: yourDataToShareWithCompB
    }
  });
}

在 CompB 中你可以这样做：

constructor(private router: Router){
 const data = router.getCurrentNavigation().extras.state.data;
}

PS：您还可以使用其他人回答的基于服务的模式