JSONオブジェクトをAngular 2コンポーネントに渡す

Question

Subject RxJSとObservablesを使用してjson objをあるコンポーネントから別のコンポーネントに渡す必要があります。ここに私のコードは次のとおりです。

メタform.component.ts

import { SharedService } from "../../../shared/shared.service"; 

@Component({ 
    selector: 'meta-form', 
    template: require("./meta-form.component.html"), 
    styles: [require("./meta-form.component.css")], 
    providers: [SharedService] 
}) 
export class MetaFormComponent implements OnInit { 
    public metaForm: FormGroup; 

    constructor(private _fb: FormBuilder, private sharedService: SharedService) { } 

    ngOnInit() { 
     this.metaForm = this._fb.group({ 
      params: this._fb.array([ 
       this.initParam(), 
      ]) 
     }) 
    } 

    initParam(): any { 
     return this._fb.group({ 
      description: ['', Validators.required], 
      type: ['', Validators.required] 
     }) 
    } 

    sendJSON() { 
     let json = JSON.stringify(this.metaForm.value); 
     this.sharedService.MetaData(json); 
    } 
} 

セーブ・form.component

import { SharedService } from "../../../shared/shared.service"; 

import 'rxjs/Rx'; 

@Component({ 
    selector: 'save-form', 
    template: require("./save-form.component.html"), 
    styles: [require("./save-form.component.css")], 
    providers: [SharedService] 
}) 
export class SaveFormComponent implements OnInit { 
    schema: string[]; 

    constructor(private sharedService: SharedService) { 
     sharedService.metaData$.subscribe((res) => this.schema = res); 
    } 

    ngOnInit() { 
    } 
} 

とshared.service.ts

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class SharedService { 

    private metaData = new Subject<string[]>(); 
    metaData$ = this.metaData.asObservable(); 

    MetaData(jsonData) { 
     this.metaData.next(jsonData); 
    } 
} 

I save-form.componentでjsonを印刷しようとしています - 何も起こりません。私は間違って何をしていますか？助けてくれてありがとう。

UPDATE：

は

<div>{{schema | json}}</div> 

3）私のJSONスキーマ出力はこの

のようになめらかになります： 1）コンソールにエラー 2）で保存し-form.component.html私はこれを持っています

{ 
    "params": [ 
    { 
     "description": "desc1", 
     "type": "string" 
    } 
    ] 
} 

Answer 1

私は間違っていますか？

あなたは@Component.providers

@Component({ 
    providers: [SharedService] 
}) 

でサービスを宣言しているこれは、そのコンポーネントは、サービスの独自のインスタンスを取得したいということを意味します。コンポーネントが作成されると、新しいサービスが作成されます。

あなたは彼らが同じサービスを共有したい場合は、モジュールレベルでサービスを宣言

@NgModule({ 
    providers: [ SharedService ] 
}) 
class AppModule {}