Angular 角度2约束问题

我来自c#world，刚接触Angular，所以这可能不是一个好方法，但是，我有一个向服务器提交大量命令的应用程序。然后，该操作是否成功将显示在客户端中。为了封装这一点，我编写了两个组件1）一个ObservablesCommandService，它订阅一个observable并在内部设置结果。2） ServerCommandStatus-用于显示结果的UI包装器：

1：

@Injectable（）
导出默认类ObservableCommandService{
公共错误：布尔；
公共错误消息：字符串；
公开展示成功：布尔；
公共成功消息：字符串；
构造函数（）{
this.hasErrors=false；
}
公共执行查询（op:可观察）{
op.subscribe（（响应）=>{
this.showSuccess=true；
this.successMessage=“Success:）”；
设置超时（（）=>{
this.showSuccess=false；
this.successMessage=''；
}, 4000);
},
（错误）=>{
this.errorMessage=`Error！发生错误：（状态代码${err.status}`；
this.hasErrors=true；
设置超时（（）=>{
this.hasErrors=false；
this.errorMessage=''；
}, 4000);
});
}
}

2：

@组件({
选择器：“服务器操作状态”，
提供者：[可观察服务]
})
@看法({
模板：`
{{observeService.errorMessage}
{{observeService.successMessage}
切换错误
`
})
导出类ServerCommandStatus{
私有ObserviceService:ObserviceCommand服务；
构造函数（observableService:ObservableCommand服务）{
this.observateService=observateService；
}
公共切换错误（）{
this.observateService.hasErrors=！this.observateService.hasErrors；
this.observeService.errorMessage='：*（发生了可怕的事情）；
}

我的理解是，注射剂在Angular2中是单态的

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

当我点击切换按钮-用于测试时，错误会正确切换

可观察对象从另一个组件放入服务中

这里好像没有更新绑定

这可能是一种奇怪的做事方式，因为我对Angular2还不熟悉，而且本身也很有棱角

如果有人能帮忙，我将非常感激

谢谢

@Injectable（）

s不是单例。

提供者

是单例。
如果您想共享实例，请不要将其作为提供程序添加到任何地方，而是添加到公共父级或引导（AppComponent，[ObservableCommand Service]）上，后者是根，因此是Angular应用程序中所有内容的公共父级。

@Injectable（）

不是单例。

提供程序

是单例。
如果要共享实例，请不要将其作为提供者添加到任何地方，而是添加到公共父级或

bootstrap（AppComponent，[ObservableCommandService]）

上，后者是应用程序中所有内容的根，因此是公共父级

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

            });
    }

}

@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';
    }