不保存组件数据之间的角度通信

Posted 2023-02-23

【中文标题】不保存组件数据之间的角度通信

【英文标题】：Angular Communication between components data is not saved

【发布时间】：2019-10-30 06:09:24

【问题描述】：

我正在尝试在我的 2 个组件之间进行通信。在第一个组件中，我有项目列表，我想将其中一个项目发送到我的第二个组件以编辑它们。在第一个组件中，我在我的服务中设置数据，在第二个组件中，我想从服务中读取这些数据，数据即将到来，但是当我在离开 ngOnInit 方法后将此数据设置到我的数组时，我的数组是清晰的。

这是我在第一个组件中的 onClick 编辑按钮

editPurchasesInvoice(i : number) 
this.purchasesService.editPurchasesInvoice(this.purchasesInvoices[i].gpInvoiceitemsByGpInvoiceRecid);
this.router.navigate(['new'], relativeTo: this.route);

服务方法

subject = new Subject<any>();

editPurchasesInvoice(invoiceItems: GpInvoiceitem[]) 
    this.subject.next(invoice: invoiceItems);
  

  getEditedInvoice(): Observable<any> 
    return this.subject.asObservable();
  

这是我的第二个组件

ngOnInit() 
    this.subscription = this.purchaseService.getEditedInvoice().subscribe( data => 
      this.invoiceItems.push(data.invoice);
    );
  

离开ngOnInit方法后数据丢失。

【问题讨论】：

你想从哪里访问它？ “离开 ngoni” 是什么意思？

我想在 html 文件中使用我的 invoiceItems 数组并显示所有这些项目。在将数据推送到 invoiceItems 数组后的 ngOnInit 方法中，它不为空，其他任何地方的数组都是空的

信息太少，无法重现。您应该发布您的 HTML 结构和两个组件之间的关系。一种可能的解决方案是在您的服务中使用BehaviorSubject 而不是Subject

您的服务类是否有多个实例？你是如何注射它们的？

@PierreDuc 我使用了 BehaviorSubject，现在它工作正常，显示数据我还更改了将 invoiceItems 初始化为 this.invoiceItems = data.invoice;

【参考方案1】：

只有在传输新数据后才会收到对Subject 的订阅。 BehaviourSubject 将在订阅时发出最后推送的数据。也可以使用ReplaySubject，基本一样，但是可以控制发射次数，不需要指定初始值。

如 cmets 中所述，您应该更新您的服务以使用这两者中的任何一个，考虑到您的数据，我建议ReplaySubject：

readonly subject = new ReplaySubject<any>(1)

editPurchasesInvoice(invoiceItems: GpInvoiceitem[]) 
  this.subject.next(invoice: invoiceItems);


getEditedInvoice(): Observable<any> 
  return this.subject.asObservable();