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

【问题标题】：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;

标签： angular service components

【解决方案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();
}

【讨论】：