如何在 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：您也可以使用其他人回答的基于服务的模式