Angular 2 ngOnChanges не срабатывает при быстро меняющемся вводе

Я использую свойство Angular 2 @Input для передачи желаемых числовых значений дочернему компоненту, подобному этому.

Родительский компонент:

@Component({
 selector: 'test-parent',
 template: '<button (click)="raiseCounter()">Click me!</button><test-child [value]="counter"></test-child>'
})

export class ParentComponent {
 public counter: number = 0;

 raiseCouner() {
  this.counter += 1;
  this.counter += 1;
  this.counter += 1;
 }
}

Дочерний компонент:

@Component({
  selector: 'test-child'
});

export class ChildComponent implments OnChanges {
 @Input() value: number = 0;

 ngOnChanges() {
  if (this.value) {
   this.doSomeWork();
  }
 }

 doSomeWork() {
  console.log(this.value);
 }
}

В этом сценарии хук жизненного цикла OnChanges срабатывает только один раз вместо 3 раз, показывая, что входное значение изменилось с 0 на 3. Однако мне нужно, чтобы он срабатывал каждый раз, когда значение изменяется (0 -> 1, 1 -> 2). , 2 -> 3 и т. д.). Есть ли способ, как это сделать?

Спасибо.


person r.a.m-    schedule 14.02.2017    source источник


Ответы (1)


Это ожидаемое поведение.
Angular2 запускает обнаружение изменений, когда обработчик события (click) завершен, то есть после третьего += 1.
Когда обнаружение изменений обновляет привязку @Input(), вызывается ngOnChanges().

person Günter Zöchbauer    schedule 14.02.2017