在同一视图上成角度地在两个组件之间传递值

Question

我正在使用角度4，我需要如下所示的布局

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

但是面临的问题是，因为我正在使用2个不同的组件，所以正在使用通用服务来处理数据。但是，当在字段中输入详细信息时，右侧窗格列表将开始更改。我不确定哪里出了问题。当用户按下确认按钮时，正在将数据推入常用服务的列表数组中。可以正常工作，但是问题是当comp 1字段更改comp 2列表数据更改为在comp字段中输入的值时。帮我解决这个问题，或者向我建议一种获得所需布局的更好方法。

预先感谢

Answer 1

在这种情况下，您可以将 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);

Answer 2

问题：
说您的服务是

ShareContent {
 items: any[];
}

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

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

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);
  }
}