Javascript 更好的方法是什么？如何实现将对象从一个嵌套组件发送到另一个嵌套组件

我正在开发一个关于产品的简单应用程序，基本上当用户选择一个产品时，它应该被发送到另一个包含该产品的组件

产品总是一个接一个地选择，我从不发送列表！仅逐项查看

基本上，当我点击屏幕上的任何产品（产品食品1，产品食品2，产品食品3），它应该被发送到屏幕的右边部分，这也是分离的成分。

我的中间部分如下所示：

<div *ngFor="let product of products;" class="product-holder">
  <div id="product.id" class="product" [style.background]="'url('+ product.imgUrl +')'">
    <p class="product-price">{{product.mpc | number}}</p>
    <p class="product-title">{{product.title}}</p>
  </div>
</div>

addReceiptItem(receiptItems: Product) {
    this.arr1.push(receiptItems);
    this.receiptItem.next(this.arr1);
  }

export class ReceiptItemComponent implements OnInit {

  constructor(private _sharedService: SharedService) { }

  receiptItems: Product[];

  ngOnInit() {
    this._sharedService.getReceiptItem().subscribe(products => this.receiptItems = products);
  }

}

现在我将发布我的正确组件，该组件应接收产品：

<div class="order-article">
  <div class="order-img"></div>
  <div class="order-title">
    <p>HERE I SHOULD WRITE ARTILE TITLE</p>
  </div>
  <div class="order-quantity pull-right">
    <span class="order-quantity-number">ARTICLE QUANTITY</span>
  </div>
</div>

export class ReceiptItemComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

正如你们看到的，伙计们：

1.）我添加了

addReceiptItem

方法

2.）此方法接受单击的产品：

addReceiptItem(receiptItem: Product) {
    this._sharedService.addReceiptItem(receiptItem);
  }

3.）注入服务“

\u sharedService

”，并在其中创建方法，也称为“addReceiptItem”

4.）在我的服务中，我创建了

BehaviorSubject

如下：

private receiptItem=new BehaviorSubject（未定义）

4.）服务中的方法如下所示：

<div *ngFor="let product of products;" class="product-holder">
  <div id="product.id" class="product" [style.background]="'url('+ product.imgUrl +')'">
    <p class="product-price">{{product.mpc | number}}</p>
    <p class="product-title">{{product.title}}</p>
  </div>
</div>

addReceiptItem(receiptItems: Product) {
    this.arr1.push(receiptItems);
    this.receiptItem.next(this.arr1);
  }

export class ReceiptItemComponent implements OnInit {

  constructor(private _sharedService: SharedService) { }

  receiptItems: Product[];

  ngOnInit() {
    this._sharedService.getReceiptItem().subscribe(products => this.receiptItems = products);
  }

}

此方法将单击的项目推送到一个数组，该数组将被发送到显示产品的组件

4.11）还添加了获取返回BehaviorSubject的数据的方法：

getReceiptItem(): BehaviorSubject<any> {
    return this.receiptItem;
  }

剩下的只是以某种方式进行破坏？
有几种策略可以解决这个问题。总的来说，这是一个状态管理问题：多个组件在一个联合状态上工作

选项1：父组件管理状态
这可能是最简单的解决方案


包含所有其他组件的父组件具有选定产品的列表
允许用户选择产品的子组件有一个@Output（）EventEmitter，当用户选择产品时它会发出。父组件侦听该输出并将发出的产品添加到其产品列表中
显示选定产品的子组件具有产品的@Input（）数组，它们基于该数组显示产品。父组件将此输入设置为其产品列表

备选案文2：国家服务
快速实施，但比#1更清晰地分离关注点


实现@Injectable
StateService
。它有a）一个带有产品列表的
BehaviorSubject
，b）一个方法
addProduct（product:product）
，该方法将一个产品添加到
BehaviorSubject
的当前值，并将其发出
每个组件都使用该服务（
构造函数（stateService:stateService）
）。当用户选择产品时，组件调用
this.stateService.addProduct（产品）

显示产品的组件侦听服务产品列表中的更改：
this.stateService.products.subscribe（products=>this.products=products）
并相应地显示产品

选项3：使用状态存储库
使用NGRX或Redux之类的工具为您进行状态管理。
您可以将productsSelected数组添加到ProductsComponent中，在选择时将选定的产品推送到其中，然后将其作为输入传递给ReceiptItemComponent（或ReceiptItemsComponent）。如果要更改子组件中的数量，但要将数组保存在父组件中，请不要忘记[（）]--香蕉盒，双向数据绑定

您还可以使用一个服务，该服务将所选产品作为行为子对象保存，并将其注入两个组件中。然后您必须订阅这两个组件中的更改才能接收更新。
这正是我编写库RxCache的目的。它为Angular应用程序提供了推送数据流，而无需增加像NGRX这样的存储所涉及的锅炉板代码的复杂性和荒谬数量


StackBlitz试验台-

官方ngrx示例应用的重做可以在StackBlitz上看到-
投票！你的建议也是国家服务吗？我有点害怕服务，因为它们可能很危险？订阅，取消订阅？谢谢你的帮助！我认为，这是快速和干净实施的最佳组合。此外，它还将迫使您了解RXJS。它们并不危险。我曾与多家野生服务公司合作。从来没有人对我造成过任何伤害（尽管带上香肠）。我很快就会读到有关香肠的文章，但那东西退订怎么办？那应该在订阅后完成吗？再次感谢当您说显示产品的组件侦听服务产品列表中的更改时，请勾选：，在ngOnInit上，该组件应在何处侦听更改？您的（新）解决方案总体上看起来不错。有一种说法是，您可能希望使用值（例如空数组：
[]
）初始化BehaviorSubject，而不是
未定义的
。如果您不需要初始值，可以使用
主题
。@fjc订阅部分如何？您查看了我在下面发布的链接了吗？这就解释了你需要知道的一切