Angular2: hizmet

Question

i bileşenden bir veri biniyorum ve ben bir hizmet

Component1 (Başlat) üzerinden başka bileşene göndermek için çalışıyorum yoluyla bileşenine bir bileşenden veri gönderme: Radyo kutu Görünüm

   <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 kodu

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

SERVİS:

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

public type1Change(selected):any 

{ 

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

} 

Bileşen 2: (Son): Basit Görünüm

ts kodu

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 



} 

!!!!!!! ! ve görünümde aynı sürede bana değeri görüntüler: söyle olabilir

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

nasıl ben "uç bileşenin ts kodu" benim verilerin değerini görüntüleyebilir ?????

Answer 1

Tam örnek 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 { 

}