2つのコンポーネント間でデータを渡すための角2サービスの観測/サブスクリプション

Question

値のセットから選択したときに発生するコンポーネントA（モーダルウィンドウ）から値を読み取ろうとしています。コンポーネントAで[OK]ボタンを押すと、コンポーネントB（ページコンポーネント）に値を渡します。私はこのためのサービスを持っており、ここに指定されている例に従っています。Delegation: EventEmitter or Observable in Angular2

私はこの件が.next（）で更新されていることを知りました。私は、成分B

からアクセスしようとしていたときにしかし、私の加入者から、私は、私はまさにここに問題があるものを見つける助けてください

XService.ts

 import { Injectable } from '@angular/core'; 
     import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; 
     import { Observable } from 'rxjs'; 
     import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 

     @Injectable() 
     export class XService { 
      constructor(private modalService: NgbModal) {} 

      // Observable Item source 
      public _adModalSelectedSource = new BehaviorSubject<string>('w'); 

      // Observable Item stream 
      selectedRow$ = this._adModalSelectedSource.asObservable(); 

      // service command 
      changeNav(string) { 
       this._adModalSelectedSource.next(string); 
      } 

     } 

更新された値が表示されません

コンポーネントA.ts

 btnClick(btn) { 
      if (btn.id === 'ok') { 
       this.XService.changeNav('yes'); 
       this.activeModal.close(this.selectedRows); 
      } else { 
       this.activeModal.dismiss(); 
      } 
     } 

ComponentB.ts

import { Component, ViewChild} from '@angular/core'; 
    import { NgbDropdownConfig, NgbTabset } from '@ng-bootstrap/ng-bootstrap'; 
    import { Subscription} from 'rxjs/Subscription'; 

    import { XService} from '../../x/x.service'; 

    import { ActivatedRoute, Params } from '@angular/router'; 

    @Component ({ 
     selector: 'compb', 
     templateUrl: './compb.html', 
     styleUrls: ['./compb.component.scss'], 
     providers: [xService, NgbTabset] 
    }) 

    export class ComponentB { 

     xService: XService; 
     test: any; 
     subscription:Subscription; 
     route: any; 
     tabs: any; 
     subTabs: { all: 'all', problemMachines : 'problem_machines' }; 

     constructor(X:XService, tabs: NgbTabset, route: ActivatedRoute) { 
      this.xModalService = X; 
      this.route = route; 
      this.tabs = tabs; 
      this.subTabs = { all: 'all', problemMachines : 'problem_machines' }; 
     } 

     SelectHandler(data) { 
      if (data.item.id === 'XXX') { 
       this.XService.openModal().then(() => { 
        **console.log('test value'+ this.test);** 
        console.log('close'); 
        //this._loadData(); 
       }); 
      } 
     } 

     ngOnInit() { 
     this.filterText = ''; 
     this.subscription = this.xService.selectedRow$.subscribe(test => this.test = test); 

     } 



     ngOnDestroy() { 
     //on destroy hook 
     this.subscription.unsubscribe(); 
     } 

    } 

SelectHandlerは、モーダル（コンポーネントAを開く）ユーザーが値を選択し、コンポーネントB（ページ）が処理できる値を選択するボタンのイベントハンドラです。

コンポーネントBでは、私はonINit（）でサブスクリプションを行いますが、this.testには変更された値はありません。

任意の入力が大幅に

Answer 1

を理解されるであろう私はあなたが、プロバイダプロパティにその設定されているため、問題は、あなたが2つのインスタンスXServiceの、成分A用と成分Bのための1つを持っているということだと思いコンポーネントのこの2つのコンポーネントをラップし、そこにXServiceをプロバイダとして設定する必要があります。これで、両方のコンポーネントで共有されるXServiceのインスタンスは1つだけになります。

@NgModule({ 
imports:   [], 
declarations: [ 
    ComponentA, 
    ComponentB 
], 
entryComponents: [ 
    ComponentA, 
    ComponentB 
], 
providers:  [XService], 
exports:   [] 
} 
)export class MyModule {} 

・ホープ、このヘルプ：

モジュールは次のようなものでなければなりません。