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中的单例。

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

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

observable从另一个组件进入服务。

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

这可能是一种奇怪的做事方式，因为我不熟悉Angular2 - 和Angular本身。保持良好的工作谷歌，它真棒：）

如果有人可以提供帮助，我会非常感激。

由于

Answer 1

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

Angular2绑定问题

1 个答案: