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

Posted 2023-02-22

【中文标题】如何在Angular中的路由组件之间传递数据

【英文标题】：How to pass data between routed components in Angular

【发布时间】：2021-09-12 09:30:13

【问题描述】：

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

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

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

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

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

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

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

有没有办法做到这一点？

【问题讨论】：

当您说“组件 A 和 B 之间没有父子关系”时。你的意思是你不使用服务？如果你不使用它，是因为你没有听说过还是因为你真的不想要？

没听说过，有没有服务可以做到这一点？

服务是一个 ts 文件，由使用相同变量/方法的某些组件使用。该文件允许您通过在组件中注入服务来共享数据。

我怎样才能注入服务？我有一个服务会调用组件 A 上的 api，我有一个函数可以在组件 B 上构造我需要的对象，我该如何发送它？

【参考方案1】：

使用路由

如果您想使用路由将数据从一个组件传递到另一个组件，您可以使用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：您也可以使用其他人回答的基于服务的模式

【参考方案2】：

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

【参考方案3】：

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

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

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

在您的第一个组件 (A) 上，您调用 API 来获取数据，在示例中，我创建了一个 seTimeout 来模拟异步调用。

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