我正在尝试使用一种服务将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方法获取数据时,它将为空。 我不知道我在做什么错..... 在浏览器中,我可以看到这样
答案 0 :(得分:2)
您可以在此过程中使用Subject,它将为每个事件触发器发出值。非常简单而重要的主题“主题”
父项
.html
<button (click)="updateName(yourValue)">Update</button>
.ts file
import { Component, OnInit } from '@angular/core';
import { XeproviderdataserviceService } from '../xeproviderdataservice.service';
export parentComponent implements OnInit {
constructor( xeDataService: XeproviderdataserviceService) {}
ngOnInit(){}
updateName(yourValue) {
this.subjectService.setXeProviderJson(yourValue);
}
在您的XeproviderdataserviceService服务中。
import { Observable, Subject } from 'rxjs';
export XeproviderdataserviceService {
subjectName : Subject<any> = new Subject<any>();
observableName$ : Observable<any> = this.subjectName.asObservable();
constructor(){}
setXeProviderJson(name) {
this.subjectName.next(name);
}
}
子组件
import { Component, OnInit } from '@angular/core';
import { XeproviderdataserviceService } from '../xeproviderdataservice.service';
export childComponent implements OnInit {
constructor( xeDataService: XeproviderdataserviceService) {}
ngOnInit(){
this.xeDataService.observableName$.subscribe(value => {
console.log(value);
this.updatedValue = value;
})
}
答案 1 :(得分:0)
也许如果您从构造函数中删除 this.jsonData = {}; ,它就会起作用。
答案 2 :(得分:0)
在父组件中,您已将该服务声明为私有对象private xeDataService: XeproviderdataserviceService
,但在子组件中,您已将其声明为公共xeDataService: XeproviderdataserviceService
。这两个组件应该相同,然后它将作为服务的单例对象工作,然后您应该获得该值。