我正在开发有关产品的简单应用程序，基本上，当用户选择产品时，应将其发送到另一个保存产品的组件。

产品一直被一个一个地选择，我从不发送清单！仅逐项！

因此，基本上，当我单击屏幕中间的任何产品（产品食物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>

和一个打字稿代码：

@Component({
  selector: 'app-products',
  templateUrl: './app-products.component.html',
  styleUrls: ['./app-products.component.css']
})
export class ProductsComponent implements OnInit {

  products: Article[];

  constructor(private _sharedService: SharedService) { }

  ngOnInit() {
    this._sharedService.getEventSubject().subscribe((param: any) => {
      if (param !== undefined) {
        this.theTargetMethod(param);
      }
    });
  }

  theTargetMethod(param) {
    // Here I am populating middle screen with products 
    this.products = param;
  }
}

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

<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() {
  }

}

因此，这个“正确”的组件应该从中间接收点击的产品，我不知道该怎么做，我@Input和@Output装饰器以及services，我都在这里，我猜@input和@output是正确的解决方案，因为我正在发送一件一件？

但是我实际上不知道如何解决这个问题。

任何形式的帮助都会很棒

谢谢

在fjc帮助之后：

<div *ngFor="let product of products;" class="product-holder" (click)="addReceiptItem(article)">
  <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>

如您所见，

1.）我添加了addReceiptItem方法

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

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

3.）注入服务“ _sharedService”和在那里创建的方法也称为“ addReceiptItem”

4.）在我的服务中，我创建了BehaviorSubject这样的内容：private receiptItem = new BehaviorSubject<any>(undefined);

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

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

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

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

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

5）显示产品的已编辑组件（代码也已在执行任何操作之前发布-空的打字稿文件），现在看起来像这样：

export class ReceiptItemComponent implements OnInit {

  constructor(private _sharedService: SharedService) { }

  receiptItems: Product[];

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

}

离开只是为了以某种方式破坏？