Angular2绑定问题

Question

我来自c＃领域，并且刚接触Angular，所以这可能不是一个好方法，但是，我有一个向服务器提交大量命令的应用程序。 然后，在客户端中显示此操作是否成功。 为了对此进行封装，我编写了两个组件：1）一个ObservablsCommandService，它订阅一个observable并在内部设置结果。 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中是单例的。

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

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

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

似乎绑定没有在这里更新？

这可能是一种奇怪的处理方式，因为我对Angular2和Angular本身并不陌生。 保持Google的出色表现，它很棒:)

如果有人可以帮助我，我将非常感激。

谢谢

Answer 1

@Injectable()不是单例。 providers者。
如果您要共享一个实例，请不要在所有地方将其添加为提供程序，而bootstrap(AppComponent, [ObservableCommandService])其添加到公共父级或bootstrap(AppComponent, [ObservableCommandService]) ，后者是根目录，因此也是Angular应用程序中所有内容的公共父级。