Javascript 如何在Angular2中触发模型更改事件？

我想在Angular2中建立一个类似Angular2的项目

我构建组件的方式是使用SequencerComponent（父级）以指定的间隔（BPM）发出事件（@Output）

PadsComponent（儿童）侦听此事件（@Input），如果PadsComponent（儿童）设置为活动，则应播放声音

// pads.component.ts
export class PadsComponent {
  @Input() hit: any = {};
}

// pads.component.html
<pad [class.active]="hit.one" class="column pad"></pad>

<pad [class.active]="hit.two" class="column pad"></pad>

<pad [class.active]="hit.three" class="column pad"></pad>

<pad [class.active]="hit.four" class="column pad"></pad>

而不是

@Input（）点击：any={}

您可以为

命中设置一个getter和setter：

private _hit;  // define a private variable _hit

@Input()
set hit(hit:any){  
    this._hit = hit;  // set the private variable and do whatever you want after each change
    playSomeSound(hit);
}
get hit(){  
    return this._hit;
}

您的模板代码仍然相同

<pad [class.active]="hit.one" class="column pad"></pad>
...


...

例如。
以下是如何使用
ngDoCheck（）
监视模型更改并发出更改的示例：

ngDoCheck() {

  if (this.previousModel !== this.model) {
    this.modelChange.emit(this.model);
  }

  this.previousModel = this.model;
}

谢谢我之所以接受这个解决方案，是因为Angular2似乎更习惯于设置hit（hit:any）

似乎在初始化组件时只触发一次，而不是在更改模型时：（@Peter每次设置

hit

，它都会触发。您能提供设置

hit

的代码吗？谢谢您提供的plunk示例。我正在更新Angular2版本，看看是否有此功能helps@Peter我不记得有任何可能影响

输入的破坏性更改。您的问题很可能是在向用户传递值的方式上
点击
，如果您可以在问题中包含该代码，就会更加清楚。
<pad [class.active]="hit.one" class="column pad"></pad>
...

ngDoCheck() {

  if (this.previousModel !== this.model) {
    this.modelChange.emit(this.model);
  }

  this.previousModel = this.model;
}