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，subject处理答案here中提到的这种情况。

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

我认为在服务返回您的component1响应之前，正在加载您的component2。您可以查看https://angular.io/guide/component-interaction以获得帮助

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

4 个答案:

ArticleInformationService

ArticleinfoComponent