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

Question

我想构建一个 drum machine在 Angular2 中类似于 an existing Angular 项目。

我构建组件的方式是让一个 SequencerComponent(父组件)在指定的时间间隔 (BPM) 发出一个事件 (@Output)。

// sequencer.component.ts
@Output() metronome = new EventEmitter();

  onBeat(count: number) {
    if(this.isPlaying) {
      this.beat.one = count == 1;
      this.beat.two = count == 2;
      this.beat.three = count == 3;
      this.beat.four = count == 4;

      this.metronome.emit(this.beat);
    }
  }

PadsComponent(子)监听此事件 (@Input)，然后如果 PadComponent(孙)设置为事件则应播放声音。

// 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>

我可以更改类，但显然我想做的不仅仅是 HTML 属性绑定(bind)。 Working example

如何让 child 和孙子在模型更改时运行函数？有没有更好、更惯用的方法来解决这个问题？

我尝试过使用 ngDoCheck 但我还没有发现如何在这个用例中使用它。

更新:hit 被绑定(bind)到sequencer.component.html 中的beat，如下所示:

<!-- sequencer.component.html -->
<div class="columns">
  <div class="column">
    <a class="button is-success" (click)="onPlay($event)" href="">Play</a>

    <a class="button is-danger" (click)="onStop($event)" href="">Stop</a>
  </div>
</div>

<pads [hit]="beat"></pads>

Answer 1

代替 @Input() hit: any = {}; 您可以为 hit 使用 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>
...

check this plunk举个例子。