Angular 2形式+ OnPush

Question

我正在编写一个angular 2应用程序，出于性能原因，我尝试在各处使用ChangeDetectionStrategy.OnPush。我有一个复杂的组件，需要OnPush才能正常工作，其中包含另一个正在显示表单的组件（使用FormBuilder创建）。我现在注意到，当我单击一个滑块时，它的内部值被更新（即form.value），但是滑块组件没有可视化此新值，即它停留在旧位置。

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

然后我想到了这个主意：

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

ngOnInit() {
  INIT_FORM();

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

但没有效果。

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

Answer 1

未经自我测试，但手动调用更改检测可能会完成您想要的事情：

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

ngOnInit() {
  INIT_FORM();

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

Answer 2

让我回答我在其他帖子上一直在回答的问题，您可以做得更好！，请告诉我这是否可行：

当您使用反应形式时，您可以使用一种非常酷的方法，称为updateValueAndValidity()；触发更改检测。

private changeControlValue(control, value: number) {
    control.setValue(value);
    control.updateValueAndValidity();
  }

您也可以在更新添加到表单的验证器时使用此方法，例如：

this.control.setValidators([Validators.required, Validators.minLength(5)]);
control.updateValueAndValidity();

这应该可以解决问题！我认为这是对ng模型使用反应形式或形式控件的最佳尝试之一。

我不建议在表单上使用valueChanges，因为您很容易忘记退订并造成内存泄漏，即使您记得创建此流程也可能很乏味。

并且请记住，使用onPush更改检测时，Angular只会检测到三件事：

1-输入和输出。2-用户可以执行的HTML事件，例如（单击）。3-订阅等异步事件。

希望我能帮助您！。