将数据从一个组件传递到另一个 Angular 2

Posted 2023-03-13

【中文标题】将数据从一个组件传递到另一个 Angular 2

【英文标题】：Pass Data from One Component to Another Angular 2

【发布时间】：2017-11-29 23:09:32

【问题描述】：

我有一个标头组件，它使用“用户服务”类调用 HTTP GET 函数以从 REST 端点检索 JSON 数据。该服务工作得很好，我可以获取数据，但我希望这些数据根据当前用户的角色确定页面上显示的控件。我需要将用户数据从标头组件传递到我根据角色更改布局或权限的所有其他组件，因此我不会每次都调用服务 GET 函数。

我已经写了一个类似的问题并且有一个好的开始，但是我如何专门将一个“用户”对象从一个组件传递到另一个组件？如果我可以访问引用或者只是从我需要的任何其他组件的标题组件中获取当前用户的数据，那正是我正在寻找的。​​p>

谢谢！

【问题讨论】：

使用 的可观察对象或承诺，然后将其缓存在您的服务中。所有后续获取用户的调用都应该获取缓存的用户。将您的服务注入所有需要它来获取用户的组件中。

【参考方案1】：

只需将用户对象存储在您的user-service 中，将服务注入到需要查看用户对象的组件中，然后实现将所述对象返回给组件的UserService.getUser 方法。

更新

好的，在阅读了您的 OP 和下面的 cmets 之后，我有了更好的理解。您已经知道如何让用户进入您的组件：

this.userService.getUser().subscribe(res => this.user=res);

问题是getUser() 每次都会触发一个 HTTP 请求，您想避免它吗？最简单的方法是在您第一次检索用户对象时将其存储在服务中，并在下次请求时提供该对象。从以下位置更改您的原始方法：

getUser(): Observable<User>  
    return this.http.get(this.url)
                  .map(res => res.json())
                  .catch(this.handleError); 
 

类似于：

//null until the first http request
currentUser:User = null;

//will serve user from local copy if available. If not, will fetch from
//server, then save a local copy
getUser(): Observable<User>  
    return !!this.currentUser? Observable.of(this.currentUser):
                               this.http.get(this.url)
                                   .map(res => res.json())
                                   //cache the result
                                   .do((res:User)=>this.currentUser=res)
                                   .catch(this.handleError); 
 

更新 2

如果您创建服务的多个实例，您仍然会发出多个 http 请求，因为每个实例都将拥有自己的缓存 currentUser。你应该有一个单例：一个唯一的全局实例。

为此，请将服务添加到根模块的 providers 数组中。

@NgModule(
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  providers:    [ UserService ],
  bootstrap:    [ AppComponent ]
)
export class AppModule  

最后确保不将该服务包含在任何其他模块或组件的providers 数组中。现在您可以在任何需要它的组件中注入相同的服务实例

constructor(private userSvc:UserService)

【讨论】：

我有一个将响应映射到 JSON 的 getUser 函数。您是说不返回 Observable，而是返回 User 对象本身？

@J-man 您试图将 JSON 对象按原样传递给所有这些组件？请出示您的getUser()

getUser(): Observable return this.http.get(this.url).map(res => res.json()).catch(this.handleError);在我的组件类中： this.userService.getUser().subscribe(res => this.user = res));

你是摇滚明星！这太棒了！谢谢！我实现了它，但我注意到在 chrome 的网络选项卡中，获取用户数据的端点被调用了两次。我首先在我的标题组件中调用它，然后在另一个组件中再次调用它。我不确定如何从服务类中引用“this.currentUser”，而不必在第二个组件的构造函数中声明私有服务实例，然后从那里调用“getUser”函​​数。这是正确的吗？谢谢@BeetleJuice

@J-man 我已添加到我的答案中。如果您觉得它有帮助，请记得点赞并选择它。

【参考方案2】：

我会为此使用 Ngrx 存储，因为它是在组件之间获取数据的官方方式。 Ngrx 存储就像一个会话，您可以跨各种组件访问它，这就是它的目的。

这是 Gary Simon 在 YouTube 上的精彩教程：https://youtu.be/9P5DTlg9oLc

这是视频的书面版本：https://coursetro.com/posts/code/151/Angular-Ngrx-Store-Tutorial---Learn-Angular-State-Management

【参考方案3】：

还有另一种解决方案。您可以使用 Angular 路由器来代替 Ngrx 存储。

基本上，它就像一个会话，你可以传入你想要的任何类型的对象，并将它定向到你想要的任何组件。

这是我发现的一个很棒的教程，我发现它很有用。我在我的应用中使用了这个解决方案，它就像一个魅力。

教程链接： https://www.thepolyglotdeveloper.com/2016/10/passing-complex-data-angular-2-router-nativescript/