如何使用角度服务将变量共享给另一个组件？答案

【问题标题】：How to share a variable to another component using a service in angular?如何使用角度服务将变量共享给另一个组件？
【发布时间】：2019-07-11 20:41:43
【问题描述】：

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

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

这是带有变量的服务

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)

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

【问题讨论】：

您在哪里取消了服务？在根 NgModule 的类装饰器中或在组件类装饰器中

标签： angular typescript

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果您不将其设为私有，您可以直接订阅子组件中的Subject（在您的情况下为productoAddSource）。查看文档：https://rxjs-dev.firebaseapp.com/guide/subject

【讨论】：