Question

在跳转我的代码之前，请先解决我下面解释的问题：

我有两个列表列表A（组件1）列表B（组件2）。数据组件（组件3）

这些所有组件都在一个父组件中。

在将项目从列表A添加到列表B

newOptions: SortablejsOptions = {
animation: 200,
group: {
  name: 'AttributeDropAreas',
  put: true
},
sort: true,
onAddOriginal: (event) => {
 this.data = {'name': 'deepender', 'companyLoc':'USA'}
},

};

this.data输出到父组件，输入到数据组件（组件3）。现在的问题是，在组件3中，我无法在模板中看到我的数据。现在，如果我在数据组件的任何位置单击该区域，则数据可见。

我通过本机拖放事件进行了交叉检查，代码工作正常，仅当我使用sortableJs时才出现。我也注意到当输入被传递时，角度的ngOnChanges（组件3）生命周期挂钩也没有触发，并且仅当我单击该区域时才触发。

 @Input() set data {

this.name = data.name; }

HTML：

<div>{{name}}</div>

Answer 1

正如您所说的ngOnChanges未被触发，这意味着摘要周期尚未获取更改。

在这种情况下，您将必须手动启动摘要循环。因此，基本上我建议创建一个新服务并将其提供到父组件中。

现在在所有3个子组件中注入此服务。

在服务中创建一个Observable / Subject，然后DATA组件的oninit订阅该服务的该Observable / Subject。在此订阅的成功回调中，可以运行ChangeDetectionReference的detectChanges方法。

现在，当您对父对象执行输出时，同时在该Observable上执行一次发射。这次，您的视图应该可以进行更改。

让我知道这是否有意义。

Answer 2

这个问题已经由我的架构师解决，并向可排序Js的贡献者提出了相同的解决方案。可修复JS的贡献者已将修复程序推送到库中，并将在下一版本中提供。

元素的SortableJs onAdd，组件的输入未更改

2 个答案: