如何检测Angular 2中的属性是否发生了变化？

在Angular 2中，可以使用Change Detection机制来检测属性是否发生了变化。Change Detection是Angular框架的核心机制之一，用于检测组件模板中的数据变化，并更新视图。

在Angular 2中，有两种方式来检测属性的变化：

手动触发变化检测：可以使用ChangeDetectorRef服务的detectChanges()方法来手动触发变化检测。在组件中注入ChangeDetectorRef服务，并在需要检测属性变化的地方调用detectChanges()方法即可。

示例代码：

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div>{{ data }}</div>
    <button (click)="updateData()">Update Data</button>
  `
})
export class ExampleComponent {
  data: string;

  constructor(private cdr: ChangeDetectorRef) {
    this.data = 'Initial data';
  }

  updateData() {
    this.data = 'Updated data';
    this.cdr.detectChanges(); // 手动触发变化检测
  }
}

使用@Input装饰器监听属性变化：在Angular中，可以使用@Input装饰器来监听父组件传递给子组件的属性变化。当父组件的属性发生变化时，子组件会自动触发变化检测。

示例代码：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <div>{{ data }}</div>
  `
})
export class ChildComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.data) {
      console.log('Data changed:', changes.data.currentValue);
    }
  }
}

在上述示例中，当父组件的data属性发生变化时，子组件的ngOnChanges方法会被调用，并且可以通过changes.data.currentValue获取最新的属性值。

以上是检测Angular 2中属性变化的两种常用方式。根据具体的业务需求和场景，选择适合的方式来检测属性变化。