Angular2：通過服務

Question

我現在是組件捕獲數據，我想通過服務

的Component1（開始）將它發送到另一個組件從組件將數據發送到一個組件：無線電箱 查看

   <md-radio-button 
        *ngIf="item.id===1" 
        value="{{item.value}}" 
        class="{{item.class}}" 
        checked="{{item.checked}}" 
        (click)="onSelectType1(item)"> //here i'm catching the value 
       {{item.label}} 
      </md-radio-button> 

TS碼

public onSelectType1(selected:any){ 
     this.formeService.type1Change(selected.nb) 
} 

SERVICE：

@Injectable() 
export class FormeService{ 
public type1S : any; 

public type1Change(selected):any 

{ 

    this.type1S=selected; //here i'm catching it into the service 

} 

組分2：（完）：簡單查看

TS碼

export class ContentComponent{ 

constructor(public BackService : BackgroundService , 
       public formeService: FormeService) 
    { 
     console.log(this.formeService.type1S) 



////// that diplays me in the console that it's undefined !!!!!!!!!!!!!!!!! 


The probleme is HERE : how may i access to the value of my variable in this part 



} 

!!!!!!! ！並在視圖中的同一時間，它顯示我的價值：

{{formeService.type1S}} // this works normally 

誰可以告訴我，我怎樣才能在「結束組件TS碼」顯示我的數據的價值?????

Answer 1

完整的例子Plunker

import {Injectable, Component, Directive} from 'angular2/core' 
import { BehaviorSubject } from 'rxjs/subject/BehaviorSubject'; 
import 'rxjs/Rx'; 

@Injectable() 
export class FormeService { 
    public type1S$:BehaviorSubject<number> = new BehaviorSubject<number>(null); 

    // when new values are set notify subscribers 
    set type1S(value:number) { 
    this.type1S$.next(value); 
    } 
} 

@Component({ 
    selector: 'content-comp', 
    template: ` 
<div>{{value}}</div> 
`}) 
export class ContentComponent { 
    value:number; 

    constructor(public formeService: FormeService) { 
    // subscribe to updates 
    this.formeService.type1S$.subscribe(val => { 
     this.value = val; 
    }); 
    } 
} 

@Component({ 
    selector: 'other-comp', 
    template: ` 
<button (click)="clickHandler()">count</button> 
`}) 
export class OtherComponent { 
    counter:number = 0; 
    constructor(private formeService: FormeService) {} 

    // set new values  
    clickHandler() { 
    this.formeService.type1S = this.counter++; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    providers: [FormeService], 
    directives: [ContentComponent, OtherComponent] 
    template: ` 
    <h2>Hello {{name}}</h2> 
    <content-comp></content-comp> 
    <other-comp></other-comp> 
` 
}) 
export class App { 

}