Передача файла JSON из одного компонента в другой с помощью службы, использующей Angular 6

Question

В компоненте displayresults я пытаюсь передать ответ, полученный от http.get (), в компонент articleinfo. Первоначально я делал это с помощью queryParams, но мне нужно передать более сложную информацию из моего JSON, такую ​​как другие объекты и массивы. Я использую ArticleInformationService, чтобы установить ответ, используя this.article_info.setJSONData(response);, а затем я использую console.log(this.article_info.getJSONData());, чтобы убедиться, что я получаю правильные данные, и я в порядке. Но теперь, когда я иду в компонент articleinfo и пытаюсь console.log(article_info.getJSONData());, я получаю пустой объект. Я предполагаю, что article_info внутри компонента articleinfo не видит своего значения из displayresults, потому что это новый экземпляр? Я иду об этом правильным путем?

Компонент 1

import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Router, NavigationExtras } from "@angular/router";
import { ArticleInformationService } from "../article_information/article-information.service";

@Component({
  selector: "app-displayresults",
  templateUrl: "./displayresults.component.html",
  styleUrls: ["./displayresults.component.css"],
  providers: [ArticleInformationService]
})
export class DisplayresultsComponent implements OnInit {
  response: any;
  constructor(
    private http: HttpClient,
    private router: Router,
    private article_info: ArticleInformationService
  ) {}

  ngOnInit() {
    this.search();
  }

  search() {
    var query: string = window.location.search.substring(1).split("=")[1];

    this.http
      .get(
        "http://my.json/_search?q=" +
          query +
          "&size=100"
      )
      .subscribe(response => {
        this.response = response;
            //*******Setting the response to the service atttribute
            this.article_info.setJSONData(response);
            console.log(response);
            console.log(this.article_info.getJSONData());
          });
      }

Компонент 2

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { ArticleInformationService } from "../article_information/article-information.service";

@Component({
  selector: "app-articleinfo",
  templateUrl: "./articleinfo.component.html",
  styleUrls: ["./articleinfo.component.css"],
  providers: [ArticleInformationService]
})

export class ArticleinfoComponent implements OnInit {
  constructor(article_info: ArticleInformationService) {
    console.log(article_info.getJSONData());
  }
  ngOnInit() {}
}

Услуги

import { Injectable } from "@angular/core";

@Injectable({
  providedIn: "root"
})
export class ArticleInformationService {
  jsonData;
  constructor() {
    this.jsonData = {};
  }
  setJSONData(val: object) {
    this.jsonData = val;
  }
  getJSONData() {
    return this.jsonData;
  }
}

Answer 1

Я думаю, ваш компонент2 загружается до того, как сервис вернет ответ в ваш компонент1. Вы можете проверить https://angular.io/guide/component-interaction для получения помощи

Answer 2

Похоже, у вас проблема с асинхронностью и последовательностью вызовов. Лучше всего использовать BehaviorSubject в классе обслуживания для решения этой проблемы.

Модифицированный код здесь -

ArticleInformationService

import { Injectable } from "@angular/core";

@Injectable({
  providedIn: "root"
})
export class ArticleInformationService {

  private dataSource = new BehaviorSubject({});
  data = this.dataSource.asObservable();

  constructor() {
    this.jsonData = {};
  }
  setJSONData(val: object) {
    this.dataSource.next(val);
  }
  getJSONData() {
    return this.data;
  }
}

ArticleinfoComponent

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { ArticleInformationService } from "../article_information/article-information.service";

@Component({
  selector: "app-articleinfo",
  templateUrl: "./articleinfo.component.html",
  styleUrls: ["./articleinfo.component.css"],
  providers: [ArticleInformationService]
})

export class ArticleinfoComponent implements OnInit {
  constructor(article_info: ArticleInformationService) {
    article_info.getJSONData().subscribe(data=>{
        console.log(data); //<-- data is here
    });
  }
  ngOnInit() {}
}

Примечание: код был написан в stackoverflow editor, поэтому может быть ошибка typo или syntactical. Пожалуйста, исправьте себя.

Answer 3

Предоставляя свое обслуживание в каждом из ваших классов, вы создаете два независимых экземпляра вашего сервиса. Значения, которые хранятся в первой версии, не будут видны во второй версии и наоборот. Вместо этого предоставьте свои услуги на более высоком уровне, например, на уровне модуля.

Answer 4

Вы сбрасываете объект jsonData в конструкторе, что означает, что всякий раз, когда вы создаете экземпляр своего сервиса, ваш объект сбрасывается на пустой.

Удалите настройку jsonData для опустошения внутри конструктора, что должно решить вашу проблему.

 jsonData = {};
 constructor() {
 }

, если вы не выполняете обновление через маршрутизатор, вышеприведенное должно работать. Однако я бы посоветовал вам использовать Observable при условии соблюдения этого сценария, как указано в ответе here.