1

在我学习了 AngularJS 之后，我正在学习 Angular2。

实际上我遇到了解决视图更新的问题。认为这可以通过 Oberving 完成，但是任何尝试实现可观察变量的尝试都失败了。

我的问题：我的 Training APP 有三行（标题、扩展名、状态），每一行都有一个组件。在标题中，我得到了一个选择，该选择由服务提供。

服务获得静态值、选择的集合和选定的值。到目前为止，一切都很好。但我想在内容组件上显示选定的值，而不是在组件之间绑定它。

这是我的代码：
HTML：

<div fxLayout="column" fxFlex>
    <app-header fxLayout="row"> 
        <app-user fxLayout="column"></app-user>
    </app-header>
    <app-extension fxLayout="row" fxFlex></app-extension>
    <app-status fxLayout="row"></app-status>
</div>

用户服务：

export class UserService {

    private static currentUser: User;
    private users: User[];

}

public constructor() {
    this.users = [];
    this.users.push(new User(1, 'Erster User!'));
    this.users.push(new User(2, 'Zweiter User!'));
    this.select(1);
}

public getUsers() {
        return this.users;
    }

    public getUser(userId: number = 0) {
        for (const user of this.users) {
            if (user.getId() === userId) {
                return user;
            }
        }
    }

    public getStamp() {
        return UserService.stamp;
    }

    public select(userId: number) {
        UserService.currentUser = this.getUser(userId);
    }

    public getCurrent() {
        return UserService.currentUser;
    }

    users: User[];

    // *** how to inject the service as a singleton instance?
    constructor(@Inject(UserService) private _userService: UserService) {
        this.users = this._userService.getUsers();
    }

用户组件

users: User[];

    // *** how to inject the service as a singleton instance?
    constructor(@Inject(UserService) private _userService: UserService) {
        this.users = this._userService.getUsers();
    }

    onChange(event) {
        this._userService.select(event.source.value);
    }

扩展组件

currentUser: User;

    constructor(@Inject(UserService) private _userService: UserService) {
        this.currentUser = this._userService.getCurrent();
    }

在扩展组件中，我可以使用任何事件（单击、按键等）显示选定的用户，但我希望在每次 userService 更改它时更新它。

我尝试了许多来自互联网的示例，但没有一个有效。

谁能帮助我理解解决方案？最佳做法是什么？理解它的最简单的代码示例是什么？

问候 n00n

4

0 回答 0