Angular 2 中的服务没有更新

Question

我在另一个组件（parent）中有一个组件（child）。调用 child 的标签是 router-outlet。我编写了一个服务，以便 child 可以更改 parent 的变量，因为在这种情况下我不能使用 EventEmitter 和 Output 但它不起作用。

服务：

import {Subject}    from 'rxjs/Subject';

import {Injectable} from '@angular/core';

@Injectable()
export class TabStatusService {


  private sub=new Subject<boolean>();
  dataStatus$ = this.sub.asObservable();

  changeStatus(data:boolean){

    this.sub.next(data);
  }
}

parent:

@Component({
  ...
  providers:[TabStatusService]
})


export class SecondarytabsComponent implements OnInit {


 private status:boolean=false;
  constructor(private tabStatusService: TabStatusService) {


  ngOnInit() {


    this.tabStatusService.dataStatus$.subscribe(
      data => {
        this.status = data;

      });
  }  
}

模板：

<div>



  <p>{{status}} </p>


</div>
<router-outlet></router-outlet>

child:

@Component({
  ....
  providers:[ConfirmationService, TabStatusService]
})
export class ProceduresComponent implements OnInit {

  constructor(private confirmationService: ConfirmationService, private tabStatusService:TabStatusService) {


  }

  ngOnInit() {
  }

  setStatus(value){
    this.tabStatusService.changeStatus(value);
  }

}

模板：

<div>

 <button type="button" class="btn btn-primary btn-lg btn-block login-button"(click)="setStatus(true)">Back</button>

</div>

问题出在哪里？

谢谢

Answer 1

从子组件的 providers 元属性字段中删除 [TabStatusService]。

目前您正在创建同一服务的多个实例。您需要为其提供根组件或 @NgModule 以共享同一服务实例。

如果你这样做，它应该会按预期工作。

Angular 2 中的服务没有更新

No update through a service in Angular 2

angular-services

angular