Angular2:从另一个组件

时间:2018-02-14 04:48:45

标签: angular components angular2-services angular2-observables

我尝试更新一个组件的数据,并将其接收到另一个组件SubjectObservables

问题

我可以在datShareService中存储数据,但是一旦数据更新,我的getData就永远不会被调用。

我有以下代码结构

fileComponent.ts 尝试在dataShareService中存储一些数据

{
...
//call dataShareService and update data
this.dataShareService.updateData(this.things);
...
}

dataShareService.ts 会获取数据并在询问时将其返回

{
...
private outputs = new Subject<any>();

  constructor() { }


  getData(): Observable<any>{
    console.log('getData', this.outputs.asObservable());
    return this.outputs.asObservable();
  }

  updateData(outputs:any): void{
    this.outputs.next(outputs);
    console.log('datashare', this.outputs);
  }
...
}
已订阅getData方法

resultsComponents.ts

{
...
public results : any;
  private sub : Subscription;

  constructor(private dataShareService: DatashareService) {
    console.log(this.dataShareService);
  }

  ngOnInit() {
    this.sub = this.dataShareService.getData().subscribe(output => {
      this.results = output;
    });
    console.log('visual result arrived', this.results);
  }
...
}

我几乎可以肯定,问题在于调用这些方法的顺序,但不确定究竟在哪里。

3 个答案:

答案 0 :(得分:1)

如果您没有获得任何价值,那么您必须更改dataShareService.ts,如下所示

 {
   ...
   private outputs = new Subject<any>();

   constructor() { }


   getData(): Observable<any>{
    console.log('getData', this.outputs.asObservable());
    return this.outputs.asObservable();
   }

    updateData(outputs:any): void{
    this.outputs.next({text:outputs});
    console.log('datashare', this.outputs);
   }
   ...
  }

答案 1 :(得分:0)

您已将console.log('visual result arrived', this.results);置于订阅方式之外。

console.log('visual result arrived', this.results);置于订阅方法中,然后每当数据更新时,它都会打印到控制台。

下面是

working Example

答案 2 :(得分:0)

使用ReplaySubject代替Subject,这样它就会发出以前的值以及