我正在尝试将 json 数据从一个组件共享到另一个组件(如父级到子级)。使用服务。我在此服务中有两种方法,一种用于 setJsonData,另一种是 getJson Data。
服务等级
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class XeproviderdataserviceService {
jsonData = {};
constructor() {
this.jsonData = {};
}
setXeProviderJson(val: object) {
this.jsonData = val;
console.log('setjson Data-', this.jsonData);
}
getXeProviderJson() {
return this.jsonData;
}
}
父组件
export class MainComponent implements OnInit {
active = 1;
constructor(private xeDataService: XeproviderdataserviceService) {
ngOnInit() {
}
selectTab(value, jsonData) {
this.active = value;
this.xeDataService.setXeProviderJson(jsonData);
console.log('getting', this.xeDataService.getXeProviderJson);
}
}
子组件
import { Component, OnInit } from '@angular/core';
import { XeproviderdataserviceService } from '../xeproviderdataservice.service';
@Component({
// tslint:disable-next-line:component-selector
selector: 'xservice-tab-component',
templateUrl: './xeservice.component.html',
styleUrls: ['./xeservice.component.css']
})
export class XeserviceComponent implements OnInit {
constructor( xeDataService: XeproviderdataserviceService) {
console.log('get json Data', xeDataService.getXeProviderJson());
}
ngOnInit() {
}
}
上面的代码我可以使用 setJsonData 函数设置数据。当我尝试使用 getJsonData 方法获取数据时,它会变空。我不知道我做错了什么.....在浏览器中我可以看到这样