在同一视图上以角度在两个组件之间传递值答案

【问题标题】：Pass values between two components in angular on the same view在同一视图上以角度在两个组件之间传递值
【发布时间】：2018-12-14 15:58:55
【问题描述】：

我正在使用 angular 4，我想要如下所示的布局

在这里，我想要一个类似的布局。其中容器 1 是表单字段，第二个容器显示从左侧表单添加的项目列表。我希望它是动态的，当用户单击添加项目时，它应该显示描述字段，然后当用户单击确认时，项目应该添加到右侧窗格中，如下所示。

但我面临的问题是，由于我使用了 2 个不同的组件，我正在使用一个公共服务来处理数据。但是，当我在字段中输入详细信息时，右侧窗格列表开始发生变化。我不确定哪里出错了。当用户按下确认按钮时，正在将数据推送到常用服务中的列表数组中。效果很好，但问题是当 comp 1 字段更改 comp 2 列表数据更改为在 comp 字段中输入的值时。帮我解决这个问题或建议我更好的方法来获得我想要的布局。

提前致谢

【问题讨论】：

你能设置一个快速的 stackblitz 示例吗，因为我不知道你的故事中发生了什么。

标签： angular angular-components angular4-forms angular-component-router

【解决方案1】：

问题：
假设您的服务是

ShareContent {
 items: any[];
}

您的组件 1 和组件 2 都引用了该 ShareContent.items。我猜你的项目是数组。 javascript 中的数组正在使用引用。因此，当您编辑 component1 中的项目时，component2 也会受到影响
因为它们拥有相同的引用。

解决：仅使 component2 与服务保持相同的引用。 component1 中的项目将首先保存不同的引用但相同的数据。要解决这个问题，您应该
首先在您的组件中1

Component1 {
  constructor(shareContent: ShareContent) {
   //Here you should let your items in component1
   //hold the different reference to items
   //You could look up for spreading(...) operator
   this.items = [...this.shareContent.getItems()];
  }
  addItem(item) {
   this.shareContent.add(item);
  }
}

其次是你的组件 2

 Component2 {
  constructor(shareContent: ShareContent) {
   //Here you SHOULD let your items
   //hold the same reference with the service
   this.items = this.shareContent.getItems();
  }
  addItem(item) {
   this.shareContent.add(item);
  }
}

ShareContent {
  items: any[];
  addItem(item) {
    this.items.push(item);
  }
}

【讨论】：

【解决方案2】：

在这种情况下，您可以使用 service 和 subject。 Angular 中的服务是单例的，这意味着它作为单个实例进行管理。因此，如果每个组件都访问服务，它们将访问相同的共享数据。

export class cartService{
    private prodCount = 0;
    prodCountCountChange: Subject<number> = new Subject<number>();
    UpdateCount(count: number) {
        this.prodCount = count;
        this.prodCountCountChange.next(this.prodCount);
    }
}

在你的组件中你可以这样做，

  this._cartService.UpdateCount(this.prod.length);

【讨论】：