Question

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

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

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

服务获得静态值，select的集合和选定的值。到现在为止还挺好。但我想在内容组件上显示所选值，而不在组件之间绑定它。

见下我的代码：
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();
    }

UserComponent

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);
    }

ExtensionComponent

currentUser: User;

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

在扩展组件中，我可以显示所选用户，包括任何事件（点击，按键等），但我想在每次userService更改时更新它。

我尝试了许多来自互联网的例子，但都没有效果。

有人可以帮我理解解决方案吗？什么是最佳做法？理解它的最简单的代码示例是什么？

关心n00n

如果service.variable已更改，则视图未更新

0 个答案: