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)
}

服务：

@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 {

}