使用使用 Angular 6 的服务将 JSON 文件从一个组件传递到另一个组件

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()); 时，我得到一个空对象。我的假设是 articleinfo 组件中的article_info 没有从 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

您正在重置构造函数中的 jsonData 对象，这意味着每当您实例化您的服务时，您的对象将被重置为空。

在构造函数中将 jsonData 设置为空，这应该可以解决您的问题。

 jsonData = {};
 constructor() {
 }

如果您没有通过路由器进行任何刷新，上述应该可以工作。但是，我建议您使用 Observable，以处理答案here 中提到的这种情况。

Answer 2

通过在每个类中提供服务，您将创建两个独立的服务实例。存储在第一个版本中的值在第二个版本中将不可见，反之亦然。 而是在更高级别上提供您的服务，例如在模块层上。

Answer 3

您的异步和调用顺序似乎有问题。最好在服务类中使用BehaviorSubject 来解决这个问题。

修改后的代码在这里-

文章信息服务

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;
  }
}

文章信息组件

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 4

我认为您的组件 2 在服务返回您的组件 1 中的响应之前已加载。 您可以查看https://angular.io/guide/component-interaction 以获得一些帮助