件名付き角度サービスObservableの呼び出しnext（）はコンポーネントの購読で表示されません

Question

角度サービスから更新されたオブジェクト値（借り手）を取得します。私はサービスにRxJS Subjectを作成して、複数のコンポーネントがそれに加入して更新された値を取得できるようにしました。

コンポーネントで提供されているサービスを通じてサブジェクトにサブスクライブすると、.next()がBorrowerServiceから呼び出されても、onNext()関数の引数が呼び出されないことがわかりました。

BorrowerServiceクラス内で購読した場合、私は.next()が期待通りに機能することがわかります。サブジェクトは.next()を呼び出すServiceクラスとコンポーネントの間の別のインスタンスであるため、そのサブスクリプションを取得しないようです。

角度サービスまたはオブザーバブルの理解に失敗していますか？サービスの値を更新し、.next()にいつ呼び出すのか分からずにコンポーネントの変更を受動的に取得するにはどうすればよいですか？

借り手-report.component.ts

@Component({ 
    ... 
    providers: [BorrowerService] 
}) 
export class BorrowerReport { 
    private borrower: Borrower; 

    constructor(private borrowerService: BorrowerService) { 
     this.borrowerService.borrowerChanged.subscribe(borrower => {this.borrower = borrower}); 
    } 
} 

borrower.service.ts

@Injectable() 
export class BorrowerService { 
    public borrowerChanged: Subject<Borrower> = new Subject<Borrower>(); 

    //event handler 
    selectBorrower(borrower: Borrower) { 
     this.borrowerChanged.next(borrower); 
    } 
} 

Answer 1

問題はお客様のサービスの範囲であり、@ngModuleはサービスを提供していません。これをシングルトンサービス（複数のコンポーネントに対して同じサービスインスタンス）にしたい場合は、すべての子コンポーネントを含む親モジュールでサービスを提供することが必要になります。保証ルートの場合は、app.module.tsに追加してください。それをモジュールでインポートし、コンポーネントとして提供するサービスとして提供します（コンポーネントからプロバイダーとして削除しますが、親モジュールに提供するだけです）。

これで、既にサービスがコンポーネントにインポートされていて、providerが親モジュールになります。基本的なアイデアは、親モジュールがすべての子コンポーネントのサービスをホストするため、すべての子コンポーネントがサービスの同じインスタンス（したがって同じ値）を受け取ることです。

サイドノート：This SO Answerは、シングルトンサービスコールApiServiceの作成に関する詳細を提供しており、堅実なガイドとして機能するはずです。もう1つのトップの答えは、確かな説明も提供します。

2番目の注記：の更新プログラムをにプッシュしたい場合は、BehaviorSubjectも使用することをお勧めします。 BehaviorSubjectへのサブスクリプションは自動的に更新され、サブジェクトへのサブスクリプションは手動で呼び出される必要があります。

Answer 2

次のことを考えてみましょう：

borrower.service.ts

を コンポーネントで

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


@Injectable() 
export class BorrowerService { 

    public borrowerChanged = new BehaviorSubject<string>('Defaut Value'); 
    borrowerChangedObservable = this.borrowerChanged.asObservable(); 
    constructor(){} 

    changeValue(value: string): void { 
    this.borrowerChanged.next(value); 
    } 
} 

、その後：あなたは、新しい値を設定する

constructor(private borrowerService: BorrowerService) { 
    this.borrowerService.borrowerChangedObservable 
     .subscribe((borrower) => { 
       console.log(borrower); 
      }); 
    } 

：

借り手-report.component.ts

あなたが値を取得します：

sendNewValueToBorrowerService(){ 
this.borrowerService.changeValue('my new value'); 
} 

と同じモジュールの宣言配列内のコンポーネントを提供する配列にサービスを追加することを忘れないでください。