Question

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

实施例：我有两个组件，user和main。

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

如果选择了另一个用户，组件只是将值（id）传输给UserService，后者将用户对象存储在名为＆＃34; selected＆＃34;的成员中。 UserService有一个方法getSelected（）来返回所选用户。

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

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

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

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中访问该服务吗？您更喜欢/建议什么？

Refards， n00n

Answer 1

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

只需在服务中创建一个Subject变量，如下所示：

res = ''
for i, j in zip(a, b):
     if i == j:
         res += '0'
     else:
         res += i

当用户选择时，只按上面的可观察值发出一个值：

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

在你的第二个组件中，你需要订阅你的主题以获得这样的价值：

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

希望它会有所帮助。

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

1 个答案: