Question

什么是处理引用类型数据（例如json数据）绑定到组件的最佳方法。例如，

<my-component [data]="jsonData"></my-component>

.ts jsonData= {'key1':'value1','key2','value2'}

中的位置

现在，如果在按钮上单击，我将jsonData更改为 {'key1':'valueX','key2','value2'}

Angular将无法检测到此更改，因此不会运行ngOnChanges（），因为angular仅检查更改了数据绑定的引用，否则将不刷新视图。我应该如何处理？

我可以在ngDoCheck（）中添加逻辑来刷新我的视图，但是它被调用了很多次。如果json很大，则每次ngDoCheck运行时都要对其进行处理是一项昂贵的操作。

我想到的一个可能的解决方案是为该组件提供服务，然后单击按钮，将新的json传递给该服务，该服务会将具有更改数据的事件发布到我的组件和组件，并监听事件服务，将使用该新数据刷新视图。

有没有更简单的方法来处理绑定到组件的JSON / Array更改？

Answer 1

您可以在组件中为@Input属性使用设置器。

拦截器输入属性随设置器的变化

使用输入属性设置器来拦截父级的值并对其执行操作。

@Input() set data(jsondata: any) {
   this._data = jsondata;
}

有关更多详细信息，请参阅文档here。

评论后更新：

是的，您也可以为此实现ngOnChanges，如文档所述：

在观看多个交互的输入属性时，您可能更喜欢这种方法而不是属性设置器。

请参见文档中的以下示例，

导出类MyComponent实现OnChanges {

   ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
      for (let propName in changes) {
         let changedProp = changes[propName];

         let to = JSON.stringify(changedProp.currentValue);
         if (changedProp.isFirstChange()) {
             console.log(`Initial value of ${propName} set to ${to}`);
         } else {
             let from = JSON.stringify(changedProp.previousValue);
             console.log(`${propName} changed from ${from} to ${to}`);
         }
      }
   }
}

您可以分别使用previousValue和currentValue属性掌握成员的旧值和新值。

处理json类型的数据绑定Angular 4

1 个答案: