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

Posted 2023-02-23

【中文标题】使用使用 Angular 6 的服务将 JSON 文件从一个组件传递到另一个组件

【英文标题】：Pass JSON file from one component to another using a service using Angular 6

【发布时间】：2019-04-04 23:40:00

【问题描述】：

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

【问题讨论】：

在服务中存储数据后是否调用了您的组件2？我猜你的 componet2 在你 set() 值之前调用了 get() 方法。你需要 observable 来跟踪你的价值观

【参考方案1】：

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

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

 jsonData = ;
 constructor() 
 

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

【讨论】：

不幸的是它没有解决它。对象仍然是空的。

我猜你正在寻找主题***.com/questions/47573371/…

我正在使用路由器。我将从 /displayresults 转到 /article，以便显示来自 /displayresults 中的 JSON 的信息。这是我得到一个空对象的原因吗？

是的，使用上面链接中提到的主题

@BryanBastida 老兄与公认的答案有什么不同？

【参考方案2】：

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

【讨论】：

就是这样！非常感谢！

【参考方案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() 

注意：代码是用*** editor 编写的，因此可能存在typo 或syntactical 错误。请改正。

【参考方案4】：

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