我正在建立一个角度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(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
