处理json类型数据绑定Angular 4

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 属性使用setter。

使用 setter 拦截输入属性更改

使用输入属性设置器拦截父级的值并对其采取行动。

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

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

cmets 后更新：

是的，您也可以为此实施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 属性获取成员的旧值和新值。