javascript – 在Angular 2服务中绑定到数据对象的正确方法？

我正在建立一个角度2应用程序.自发布以来,文档发生了很大的变化,引起了混乱.我能做的最好的事情就是解释我想要做的事情(在Angular 1中这很容易)并希望有人可以帮助我.

我已经使用JWT创建了一个登录服务.
登录成功后,我返回一个用户对象.

我有一个loginComponent(将数据绑定到模板)和loginService(处理https调用)

我有一个维护用户对象的userService.

我有一个userComponent,用于呈现用户数据.

问题是,一旦用户登录,我不清楚让userService在名为“user”的对象中检索新数据的最佳方法,然后userComponent更新模板上的用户对象.只需将观察者放在userService.user对象上,就可以轻松实现角度1.

我尝试输入和输出无效,eventEmitters,Observables和getter and setters. getter和setter工作,但强迫我将所有内容存储在“val()”中

有人可以告诉我实现这个目标的最佳方法吗？

> User Component使用user.firstName,user.lastName等呈现模板.
>最初用户如果是空对象
>登录服务需要设置UserService.user
> userComponent需要检测更改并更新DOM.

提前致谢！

解决方法

如果我没有错,那么您正在寻找一种方法来“监听”UserService.user中的更改,以便在UserComponent中进行适当的更新.使用Subject(或BehaviorSubject)很容易做到这一点.

– 在UserService中,声明类型为Subject< User>的属性用户.

user: Subject<User> = new Subject();

– 将其暴露在外面作为可观察的：

user$: Observable<User>
...
this.user$= this.user.asObservable();

-Login函数将更新私有用户Subject.

login(userName: string,password: string) {
  //...
  this.user.next(new User("First name","Last name"));
}

– 在UserComponent中,订阅UserServive的用户$observable以更新视图.

this.userService.user$.subscribe((userData) => {this.user = userData;});

– 在您看来,只需使用字符串插值：

{{user?.firstName}} {{user?.lastName}}

这是工作的plunker：http://plnkr.co/edit/qUR0spZL9hgZkBe8PHw4?p=preview

原文地址：https://www.jb51.cc/js/155601.html