Angular2 Binding issue

Question

Я из мира C# и новый для Angular, поэтому это не может быть хорошим подходом, однако у меня есть приложение, которое отправляет на сервер множество команд. Было ли это успешным или нет, отображается на клиенте. Чтобы инкапсулировать это, я написал два компонента: 1) 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.

Этот пример не работает. Весь код вызывается и возвращается правильно, однако результаты не отображаются в статусе команды сервера.

Когда я нажимаю кнопку переключения - для теста ошибка корректно переключается.

Наблюдаемый помещается в службу из другого компонента.

Кажется, что привязка не обновляется здесь?

Это может быть странный способ делать вещи, поскольку я новичок в Angular2 - и Angular per se. Следите за хорошей работой Google, ее удивительной :)

Если кто-нибудь может помочь, я буду очень благодарен.

Благодаря

Answer 1

@Injectable() s не одиночки. providers есть.
Если вы хотите поделиться экземпляром, не добавляйте его как поставщика во всех странах, а вместо этого в общий родитель или bootstrap(AppComponent, [ObservableCommandService]), который является корнем и, следовательно, общим родителем всего в вашем угловом приложении.