![](/img/trans.png)
[英]Angular 7: Unable to get the value from service which is shared between components
[英]unable get data from shared service in angular 6
我正在嘗試使用一種服務將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方法獲取數據時,它將變為空。 我不知道我在做什么錯.....在瀏覽器中我可以看到這樣
您可以在此過程中使用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;
})
}
在您的父組件中,您已將該服務聲明為私有對象private xeDataService: XeproviderdataserviceService
但是在您的子組件中,您已將其聲明為public xeDataService: XeproviderdataserviceService
。 這兩個組件應該相同,然后它將作為服務的單例對象工作,然后您應該獲得該值。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.