Question

我在另一个组件（父组件）中有一个组件（子组件）。调用孩子的标签是router-outlet。我写了一个服务，以便孩子可以更改父变量，因为在这种情况下我不能使用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);
  }
}

父母：

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

孩子：

@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

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

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

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

没有通过Angular 2中的服务进行更新

1 个答案: