angularjs - 如何像我们在 Angular 1 中使用 $watch 一样在 Angular 2 中观察复杂对象

Question

我们能够在复杂对象上应用 $watch，如何在 Angular 2 中做类似的事情。

Angular 1

$scope.data = {name : "somvalue"}
$scope.$watch('data.name', function(newValue, oldValue) {
    scope.counter = scope.counter + 1;
});

Angular 2

export class MyData{
   name: string;
} 

export class MyComponent implements OnInit {
   @Input() data: MyData;

   constructor(private ds: MyService){
      this.data = ds.data;
   }

   // $watch('data.name', function(newValue, oldValue) {
   //   scope.counter = scope.counter + 1;
   // });
}

现在如果服务中的 data.name 发生变化，如何观察组件本身的变化，请注意数据不是可观察的，它只是一个常规对象。

更新

Please see Plunk for an example

提前致谢!!

Answer 1

Angular 检查属性，如果对象绑定(bind)到模板中，甚至会深入到对象内部。

对于复杂对象，首选选项是使用 Observable 主动通知 Angular2 有关更改。

您还可以通过实现 DoCheck 来使用自定义更改检测