Angular 2 形式 + OnPush

Question

我正在编写一个 Angular 2 应用程序，出于性能原因，我尝试在所有地方使用 ChangeDetectionStrategy.OnPush。我有一个复杂的组件需要 OnPush 才能顺利工作，其中包含另一个显示表单的组件(使用 FormBuilder 创建)。我现在注意到，当我单击 slider 时，它的内部值会更新(即 form.value)，但 slider 组件不会显示这个新值，即它停留在旧位置。

我解决这个问题的第一个想法是将叶组件的变更检测策略设置为默认值，但这没有效果，因为显然这也需要更改其父组件的变更检测策略(这在我的应用程序中是不可能的) .

然后我想出了这个主意:

@Component({
   ...
})
class MyComponent implements OnInit {
  constructor(private zone: NgZone) {}

ngOnInit() {
  INIT_FORM();

  this.form.valueChanges
    .subscribe(() => {
      this.zone.run(() => {});
    });
  }
}

但是没有效果。

是否有可能使 Angular 2 表单在使用 OnPush 的组件内工作？

Answer 1

我自己没有测试过，但手动调用变化检测可能会做你想做的事:

@Component({
   ...
})
class MyComponent implements OnInit {
  constructor(private cdRef: ChangeDetectorRef) {}

ngOnInit() {
  INIT_FORM();

  this.form.valueChanges
    .subscribe(() => {
      this.cdRef.detectChanges();
    });
  }
}