Question

您好，我正在尝试将虚拟商店中产品的数据发送到另一个组件中，该产品位于一个变量中，然后在该组件中获取它以便进行迭代并将其添加到表中并显示给用户。但我仍然没有实现。我正在使用共享服务谁能帮我？

我已经创建了服务以及必要的变量和可观察的变量，并将服务注入到我的子组件中，该子组件负责将变量发送到另一个组件，但是我在所需的组件中未定义它。

这是带有变量的服务

private productoAddSource = new Subject<any>();
productoSel = this.productoAddSource.asObservable();

 getProductoSeleccionado(producto:any){
    this.productoAddSource.next(producto)
    console.log("getProducto" + producto);
  }

这是我的孩子部分，我需要共享一个变量

addPseleccionado(form:NgForm){
    console.log(form);
    this.addproducto = form;
this.sharedService.getProductoSeleccionado(form);
    console.log("detalle producto" + this.addproducto);

addPseleccionado(form:NgForm){
    console.log(form);
    this.addproducto = form;

    this.sharedService.getProductoSeleccionado(form);
    console.log("detalle producto" + this.addproducto);

 enviarVariable(producto: any){
     this.sharedService.getProductoSeleccionado(producto)
   }

这是购物车中的欲望组件

this.sharedService.productoSel.subscribe(producto => this.producto = producto)

“我希望表单的对象作为数组存在于组件中，以对其进行迭代并放入表中。” “先感谢您。” “输出未定义”

Answer 1

如果只想在子组件中使用变量，那么通过@Input属性传递变量将是一个好方法。当组件相邻并且无法传递数据时，使用服务共享数据是很好的。要了解有关Input / Output属性的更多信息，最好参考Angular文档https://angular.io/guide/component-interaction。

Answer 2

如果您不将其设为私有，则可以直接在子组件中订阅Subject（在您的情况下为productoAddSource）。查看文档：{{3}}

如何使用angular服务将变量共享给另一个组件？

2 个答案: