0

我正在使用 angular 4 我想要如下布局 在此处输入图像描述

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

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

提前致谢

4

2 回答 2

0

在这种情况下，您可以使用 a servicewith 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);
于 2018-07-06T06:05:11.930 回答
0

问题：
假设您的服务是

ShareContent {
 items: any[];
}

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

解决：仅让 component2 与服务保持相同的引用。component1 中的项目将首先保存不同的引用但相同的数据。要解决这个问题，您应该
首先在您的 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);
  }
}
于 2018-07-06T06:05:45.463 回答