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

Question

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

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

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

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

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

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

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

有办法实现吗？

Answer 1

您可以使用具有主题/行为的服务来实现这一点，如他们的 docs

中所述

Answer 2

使用服务，您可以通过注入服务的组件共享数据。

我创建了一个 stackblitz，其中有一个小例子，可以共享数据并知道何时从 API 检索数据。

在此示例中，您有 2 个组件 A 和 B，以及一个服务“example”。

在你的第一个组件 (A) 上你调用 API 来获取数据，在这个例子中我做了一个 seTimeout 来模拟一个异步调用。

然后，当调用结束时，可以显示一个移动到b的按钮，并且在组件b上有从超时中检索到的数据。

Answer 3

使用路由

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

在 CompA 中你可以做：

constructor(private router: Router){
}

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

在 CompB 中你可以做：

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

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

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

How to pass data between routed components in Angular

angular

angular10