Question

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

我写了一个类似的问题并且有一个良好的开端，但我如何专门传递一个＆＃34;用户＆＃34;对象从一个组件到另一个组件？如果我可以访问引用，或者只是从我需要的任何其他组件的头部组件中获取当前用户的数据，那正是我正在寻找的。

谢谢！

Answer 1

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

更新

在阅读完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。你应该有一个单身人士：一个独特的全球实例。

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

@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路由器来代替Ngrx存储。

基本上，它的作用类似于会话，您可以传入所需的任何类型的对象，并将其定向到所需的任何组件。

这是我找到的很棒的教程，我发现它很有用。我为我的应用程序使用了此解决方案，它的工作原理就像一个魅力。

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

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

3 个答案:

更新

更新2