Question

我需要使用RxJS Subject和Observables将JSON对象从一个组件传递到另一个组件。这是我的代码：

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

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

当我尝试在save-form.component上打印JSON时 - 没有任何反应。我究竟做错了什么？谢谢你的帮助。

更新： 1）控制台中没有错误 2）在save-form.component.html中我有这个：

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

3）我的JSON架构输出看起来像这样

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

Answer 1

我做错了什么？

您在@Component.providers

中声明了该服务

@Component({
    providers: [SharedService]
})

这意味着您希望该组件获得自己的服务实例。因此，在创建组件时，将创建一个新服务。

如果您希望他们共享相同的服务，请在模块级别声明服务

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

将JSON对象传递给Angular 2组件

1 个答案: