Angular2绑定问题答案

【问题标题】：Angular2 Binding issueAngular2绑定问题
【发布时间】：2016-05-31 21:55:58
【问题描述】：

我来自 c# 世界并且是 Angular 的新手，所以这可能不是一个好方法，但是，我有一个向服务器提交大量命令的应用程序。然后在客户端中显示这是否成功。为了封装这一点，我编写了两个组件 1) 订阅 observable 并在内部设置结果的 ObservablsCommandService。 2) ServerCommandStatus - 围绕它的 UI 包装器以显示结果：

1：

@Injectable()
export default class ObservableCommandService {

    public hasErrors: boolean;
    public errorMessage: string;
    public showSuccess: boolean;
    public successMessage: string;

    constructor() {
        this.hasErrors = false;
    }

    public executeNonQuery(op: Observable<Response>) {
        op.subscribe((response) => {

        this.showSuccess = true;
            this.successMessage = "Success :)";

            setTimeout(() => {
                this.showSuccess = false;
                this.successMessage = '';
            }, 4000);
        },
            (err) => {

                this.errorMessage = `Error! An error occurred :( status code ${err.status}`;

                this.hasErrors = true;

                setTimeout(() => {
                    this.hasErrors = false;
                    this.errorMessage = '';
                }, 4000);

            });
    }

}

2：

@Component({
    selector: 'server-operation-status',
    providers:[ObservableService]
})
@View({
        template: `
    <div [hidden]="!observableService.hasErrors">
        <div class="alert alert-danger">
            {{observableService.errorMessage}}
        </div>
    </div>

    <div [hidden]="!observableService.showSuccess">
        <div class="alert alert-success">
            {{observableService.successMessage}}
        </div>
    </div>

<button (click)="toggleError()">Toggle an Error</button>
`
})
export class ServerCommandStatus {
    private observableService: ObservableCommandService ;

    constructor(observableService: ObservableCommandService ) {
        this.observableService = observableService;
    }

    public toggleError() {
        this.observableService.hasErrors = !this.observableService.hasErrors;
        this.observableService.errorMessage = ':*( terrible things happened';
    }

我的理解是在 Angular2 中注入是单例的。

这个例子不起作用。所有代码都被调用并正确返回，但是结果不显示在服务器命令状态中。

当我单击切换按钮 - 进行测试时，错误会正确切换。

observable 从另一个组件放入服务中。

这里好像没有更新绑定？？

这可能是一种奇怪的做事方式，因为我是 Angular2 和 Angular 本身的新手。跟上谷歌的好工作，太棒了:)

如果有人能提供帮助，我将不胜感激。

谢谢

【问题讨论】：

标签： angular typescript

【解决方案1】：

@Injectable()s 不是单例。 providers 是。
如果你想共享一个实例，不要将它作为提供者添加到任何地方，而是添加到一个公共父级或bootstrap(AppComponent, [ObservableCommandService])，它是根，因此是 Angular 应用程序中所有内容的公共父级。

【讨论】：