Angular2：從另一個組件調用時不會觸發訂閱的方法

Question

我正在嘗試從一個組件更新數據，並將其接收到另一個組件中並使用Subject和Observables 。

問題

我能夠將數據存儲在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);
  }
...
}

我幾乎可以肯定，問題在於調用這些方法的順序，但不確定具體在哪里。

Answer 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);
   }
   ...
  }

Answer 2

你已經把console.log('visual result arrived', this.results); 在您的訂閱方法之外。

把你的console.log('visual result arrived', this.results); 在 subscribe 方法中，每當數據更新時，它都會打印到控制台。

下邊是

工作示例

Answer 3

使用 ReplaySubject 而不是 Subject，這樣它也會發出以前的值