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

Question

我有一个 header 组件，它使用 "user-service" class 调用 HTTP GET 函数从 REST 端点检索 JSON 数据。该服务运行良好，我可以获得数据，但我希望这些数据能够根据当前用户的角色确定页面上显示哪些控件。我需要将用户数据从 header 组件传递到我根据角色更改布局或权限的所有其他组件，因此我不会每次都调用服务 GET 函数。

我已经写了一个类似的问题并且有了一个好的开始，但是我如何具体地将 "user" object 从一个组件传递到另一个组件？如果我可以访问引用或仅从我需要的任何其他组件中的 header 组件获取当前用户的数据，那将正是我正在寻找的。

谢谢！

Answer 1

只需将用户对象存储在您的 user-service 中，将服务注入到需要查看用户对象的组件中，并实现一个 UserService.getUser 方法，该方法将 return 所述对象组件。

更新

好的，看完你的OP和下面的评论，我有了更好的理解。您已经知道如何让用户进入您的组件：

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。你应该有一个单例：一个唯一的全局实例。

为此，请将服务添加到根模块的提供程序数组中。

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

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

constructor(private userSvc:UserService){}

Answer 2

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

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

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

Answer 3

还有一个解决办法。您可以使用 Angular Router.

而不是使用 Ngrx 存储

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

这是我找到的一个很棒的教程，我发现它很有用。我在我的应用程序中使用了这个解决方案，它非常有效。

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

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

Pass Data from One Component to Another Angular 2

angular-routing

angular-services

angular-components

angular

更新

更新 2