невозможно получить данные из общего сервиса в angular 6

Question

Пытаюсь поделиться данными 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, они будут пустыми. я не мог понять, что я делаю не так ..... в браузере я вижу вот так

Answer 1

Вы можете использовать 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;
  })

}

Answer 2

В вашем родительском компоненте вы объявили службу как частный объект private xeDataService: XeproviderdataserviceService, но в своем дочернем компоненте вы объявили ее как public xeDataService: XeproviderdataserviceService.Он должен быть одинаковым в обоих компонентах, и тогда он будет работать как одноэлементный объект службы, а затем вы должны получить значение.

Answer 3

Возможно, если вы удалите this.jsonData = {}; из конструктора, это сработает.