Question

我使用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 - ＆gt; 2,2-＆gt; 3等。）。有办法怎么做？

感谢。

Answer 1

这是预期的行为当(click)事件处理程序完成时，Angular2会在第3 += 1之后运行更改检测。当更改检测更新@Input()绑定时，则会调用ngOnChanges()。

Angular 2 ngOnChanges不会在快速变化的输入上触发

1 个答案: