Angular 2 表单 + OnPush

Question

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

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

然后我想出了这个主意：

@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();
    });
  }
}