javascript - 绑定(bind)到 Angular 2 服务中的数据对象的正确方法？

Question

我正在构建一个 Angular 2 应用程序。自发布以来，文档发生了很大变化，这引起了困惑。我能做的最好的事情就是解释我想做什么(这在 Angular 1 中很容易)并希望有人能帮助我。

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

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

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

我有一个呈现用户数据的 userComponent。

问题是，一旦用户登录，我不清楚让 userService 在名为“user”的对象中检索新数据的最佳方法，然后 userComponent 在模板上更新其用户对象。这在 Angular 1 中很容易，只需在 userService.user 对象上放置一个观察者即可。

我尝试了 Inputs 和 Outputs，eventEmitters，Observables 和 getters and setters 都没有用。 getter 和 setter 工作，但迫使我将所有内容存储在“val()”中

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

1. 用户组件使用 user.firstName、user.lastName 等呈现模板。
2. 如果是空对象则初始用户
3. 登录服务需要设置UserService.user
4. userComponent 需要检测变化并更新 DOM。

提前致谢!

Answer 1

如果我没记错的话，您正在寻找一种方法来“聆听”您的 UserService.user 中的变化。在您的 UserComponent 中进行适当的更新.使用 Subject 很容易做到这一点(或 BehaviorSubject )。

-在你的UserService , 声明属性 user与类型 Subject<User> .

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

-将其暴露给外部作为可观察的:

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

-登录函数将更新私有(private)user主题。

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

-在你的UserComponent , 订阅 UserServive的 user$ observable更新 View 。

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

-在您看来，只需使用字符串插值即可:

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

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