如何从 HTML 视图访问服务成员？

Question

我正在学习 Angular 2，但不确定应该采用哪种方式来更新视图。

示例： 我有两个组件，用户和主。

User 组件从 UserService 获取用户列表。该组件正在从此服务中读取所有初始化用户，并将一个组件成员设置为用户列表。

如果另一个用户被选中，该组件只是将值 (id) 传递给 UserService，UserService 将用户对象存储在一个名为“selected”的成员中。 UserService 有一个方法 getSelected() 来返回选定的用户。

就其而言，它正在工作（顺便问一下，如何在 Type Script 中创建私有/公共成员/方法？）

现在我想在主组件中显示选择的用户。 如何显示它，选择的每次更新都通过服务委派并被主要组件捕获。

用户控制器中用于选择用户的示例代码

onChange(event) {

        this._userService.select(event.source.value);

    }

在用户服务中我这样存储：

select(userId: number) {
        for (const user of this.users) {
            if (user.getId() === userId) {
                this.selected = user;
            }
        }
    }

得到主要组件

getUser() {
        return this._userService.getCurrent();
    }

在 HTML 我试过这个

<div fxLayout="column" fxFlex fxLayoutAlign="center center">    
    <div>selected User: {{getUser()}}</div>
</div>

但它不起作用。 angular2/typescript 中最好的方法是什么？

我应该在我的 HTML 中直接访问该服务吗？您更喜欢/建议什么？

推荐， n00n

Answer 1

有两种方法可以完成你的任务：

只需像这样在您的服务中创建一个主题变量：

public selectedUser$ = new Subject<User>();

当用户选择时，只需通过上面的 observable 发出一个值，如下所示：

onChange(event) {
  this._userService.selectedUser$.next(event.source.value);    
}

在您的第二个组件中，您需要订阅您的主题以获得如下价值：

this._userService.selectedUser$.subscribe(user => {
  console.log(user);
})

希望它会有所帮助。