angular2 subjectは変更をサブスクライブしません

Question

私は2つのコンポーネントと、2つのコンポーネントで共有される共有サービスを持っています。

shared.service.ts

// ..... top level codes are skipped 

private pickAnalysisForBubble = new Subject<any>(); 

    analysisForBubble$ = this.pickAnalysisForBubble.asObservable(); 

    mapToggleToPointOrBubble(value) { 
    this.pickAnalysisForBubble.next(value); 
    } 

図（utility.component.html）でutility.component.ts

、両無線ボタン、1つは存在するが、予め選択され：

<input type="radio" name="rdbBubblePoint" class="rdbBubblePoint" value="Point" (change)="changeToPoint($event)"> Point<br> 
<input type="radio" name="rdbBubblePoint" class="rdbBubblePoint" value="Bubble" (change)="changeToPoint($event)" checked="checked"> Bubble<br> 

コンポーネント（utility.component.ts）には、クリックを取得する方法がありますイベント：（。私はshared.serviceを輸入して、プロバイダとしてこれを追加しました）

changeToPoint(event){ 
    # analysisInteraction is the shared service constructor 
    this.analysisInteraction.mapToggleToPointOrBubble(event.target.value); 
} 

map.component.ts

私はshared.serviceを輸入し、コンストラクタを追加しました。その後、ngOnInitでsubscribeに変更しようとしましたが、が動作していません。

# analysisInteraction is the shared service constructor 
this.analysisInteraction.analysisForBubble$.subscribe(
     data => { 
      this.DrawType = data; 
      console.log("Drawtype fixed"); 
     }); 

私はこのtutorialに基づいて変化を検出するsubjectを使用しています。私は間違っているの？

Answer 1

私はサービスの同じインスタンスを共有しないと思います。アプリケーションまたは主要コンポーネント内をブートストラップするときには、対応するプロバイダを指定してください：

bootstrap(AppComponent, [ SharedService ]); 

または

@Component({ 
    (...) 
    providers: [ SharedService ] 
}) 
export class AppComponent { 
    (...) 
} 

を使用すると、サブコンポーネントのproviders属性の中でそれを指定した場合、あなたが共有して確認されていませんそのためhierarcの同じインスタンス...

編集

各コンポーネントは、独自のインスタンスを持ち、同じインスタンスを共有しません。したがって、共有サービスは、mainコンポーネントのプロバイダとして追加する必要があります。また、共有サービスは、サブコンポーネントのプロバイダに含まれるべきではありません。