代码之家 › 专栏 › 技术社区 › Taieb

如何在Angular中的布线零部件之间传递数据

angular10 angular

0

Taieb · 技术社区 · 3 年前

我有一个路由组件,如下所示:

从组件A:我有一个通过API获取的对象,现在我有一个子按钮,它将我重定向到组件B。

组件A和B之间不存在父子关系。

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

我不想通过URL传递数据 这样地:

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

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

有办法做到这一点吗?

1 回复 | 直到 3 年前

1

10

YogendraR 2 年前

使用路由

如果要使用路由将数据从一个组件传递到另一个组件,可以使用 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;
}

附言:你也可以使用其他人回答的基于服务的模式

2

0

Eytan 3 年前

为了实现这一点,您可以使用具有Subject/Behavior的服务,如他们的 docs

3

0

Alexis 3 年前

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

我已经创建了 stackblitz 并举例说明了共享数据和知道何时从API检索数据的可能性。

在本例中,您有两个组件A和B,以及一个服务“example”。

在第一个组件(A)中,您调用API来获取数据,在示例中,我使用seTimeout来模拟异步调用。

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

4

0

Adeel Shekhani 2 年前

可以使用 state 对象来自 NavigationExtras 。就像其他人提到的那样

this.router.navigate(['your-component-route'], {
 state:{
   myComplexObject: dataObject
  }
});

然后在其他组件中获取该对象,如

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

**

重要:

** 这里值得一提的是 router.getCurrentNavigation() 仅在中具有值 **constructor** ,否则将无法访问inInit。希望这能有所帮助